自动轮播banner图

太过爱你忘了你带给我的痛 2022-02-17 08:09 383阅读 0赞

Html代码：

<div class="banner">
    <img src="images/c.jpg">
    <img src="images/b.jpg">
    <img src="images/a.jpg">
    <div class="btns">
        <span class="on"></span>
        <span></span>
        <span></span>
    </div>  
</div>

Js代码：

<script>
    $(function(){
        $(".banner img").hide();
        $(".banner img").eq(0).show();
        var n=0;
        function changeImg(){
            if(n>1){
                n=0;
            }else{
                n++;
            }
            $(".banner img").hide();
            $(".banner img").eq(n).show();
            $(".btns span").removeClass("on");
            $(".btns span").eq(n).addClass("on");
        }
        var timer = setInterval(changeImg,2000);
        $(".banner").hover(function(){
            clearInterval(timer);    
        },function(){
            timer = setInterval(changeImg,2000)
        })
        $(".btns span").click(function(){
            $(".btns span").removeClass("on")
            $(this).addClass("on")    
            n = $(".btns span").index(this);
            $(".banner img").hide();
            $(".banner img").eq(n).show();
        })
    })
</script>