图片轮播

最新推荐文章于 2025-05-22 13:28:11 发布

每天一滴水

最新推荐文章于 2025-05-22 13:28:11 发布

阅读量430

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js课堂文章标签： jsp

本文链接：https://blog.youkuaiyun.com/qq_26138325/article/details/50763225

js课堂专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用jsp代码实现动态轮播图，并通过JavaScript进行交互操作，包括自动轮播、鼠标悬停暂停、点击切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp代码

<!--banner-->
<div class="banner" id="banner" >
    <a class="d1"><img src="${templateImgPath}/banner1.jpg" width="1200" height="385" /></a>
    <a class="d1"><img src="${templateImgPath}/banner2.jpg" width="1200" height="385" /></a>
    <a class="d1"><img src="${templateImgPath}/banner3.jpg" width="1200" height="385" /></a>
    <a class="d1"><img src="${templateImgPath}/banner4.jpg" width="1200" height="385" /></a>
    <a class="d1"><img src="${templateImgPath}/banner5.jpg" width="1200" height="385"/></a>
    <a class="d1"><img src="${templateImgPath}/banner6.jpg" width="1200" height="385" /></a>

    <div class="d2" id="banner_id">
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
    </div>
</div>
<script>banner();
$(window).resize(function(){
    banner();
});

</script>
<!--banner end-->

插件代码

// JavaScript Document
function banner(){  
    var bn_id = 0;
    var bn_id2= 1;
    var speed33=5000;
    var qhjg = 1;
    var MyMar33;


    $("#banner .d1").hide();
    $("#banner .d1").eq(0).fadeIn("slow");
    if($("#banner .d1").length>1)
    {
        $("#banner_id a").eq(0).addClass("nuw");
        function Marquee33(){
            bn_id2 = bn_id+1;
            if(bn_id2>$("#banner .d1").length-1)
            {
                bn_id2 = 0;
            }
            $("#banner .d1").eq(bn_id).css("z-index","2");
            $("#banner .d1").eq(bn_id2).css("z-index","1");
            $("#banner .d1").eq(bn_id2).show();
            $("#banner .d1").eq(bn_id).fadeOut("slow");
            $("#banner_id a").removeClass("nuw");
            $("#banner_id a").eq(bn_id2).addClass("nuw");
            bn_id=bn_id2;
        };

        MyMar33=setInterval(Marquee33,speed33);

        $("#banner_id a").click(function(){
            var bn_id3 = $("#banner_id a").index(this);
            if(bn_id3!=bn_id&&qhjg==1)
            {
                qhjg = 0;
                $("#banner .d1").eq(bn_id).css("z-index","2");
                $("#banner .d1").eq(bn_id3).css("z-index","1");
                $("#banner .d1").eq(bn_id3).show();
                $("#banner .d1").eq(bn_id).fadeOut("slow",function(){qhjg = 1;});
                $("#banner_id a").removeClass("nuw");
                $("#banner_id a").eq(bn_id3).addClass("nuw");
                bn_id=bn_id3;
            }
        })
        $("#banner_id").hover(
            function(){
                clearInterval(MyMar33);
            }
            ,
            function(){
                MyMar33=setInterval(Marquee33,speed33);
            }
        )   
    }
    else
    {
        $("#banner_id").hide();
    }
};