使用jQuery进行轮播图

Posted 2020-11-17 zwjfrontend

由于经常使用插件来制作轮播图，所以把这个轮播图的代码记好。使用了淡入淡出的方式

html:

<div class="Slides">
    <ul class="pics">
        <li ><img src="img/banner1.jpg" width="1920px" height="500px"></li>
        <li ><img src="img/banner1.jpg"  width="1920px" height="500px"></li>
        <li ><img src="img/banner1.jpg"  width="1920px" height="500px"></li>
    </ul>
    <div id="buttons">
        <span  class="picsli on" index="1"></span>
        <span  class="picsli" index="1"></span>
        <span  class="picsli" index="1"></span>
    </div>
    <a id="prev" class="unslider-arrow04 prev "><img src="img/l.png"></a>
    <a id="next" class="unslider-arrow04 next"><img src="img/r.png"></a>
</div>

CSS:

.Slides{
    border-top:10px  solid #533336;
    clear: both;

    position: relative;
}
.pics{
   width: 1920px;
    height: 500px;
    overflow: hidden;

}
#buttons{
    position: absolute;
    height: 10px;
    width: 100px;
    z-index:2;
    bottom: 80px;
    left: 50%;
    margin-left: -36px ;
}
#buttons .on {
    background: #fff;
}
#buttons span{
    cursor: pointer;
    float: left;
    border: 2px solid #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #333;
    margin-right: 8px;
}
#next{
    position: absolute;
    right: 0;
    top: 40%;
}
#next :hover{
    background-color: white;
    opacity: 0.5%;
}
#prev{
    position: absolute;
    float: left;
    top: 40%;
}
#prev :hover{
    background-color: white;
    opacity: 0.5%;
}

JQ:

$(function(){
    //赋予变量
    var i = 0;

    function run(){
        i++;
        //判断，让图片循环播放，还可以用三元表达式写
        // if(i==5){
        //     i=0;
        // };
        i= (i==3)?0:i;
        // 让i号图片显示，让它的兄弟元素隐藏

        $(".pics li").eq(i).fadeIn(1000).siblings("li").fadeOut(1000);
        //让li变红
        $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on");
    }
    //设置定时器，自动轮播

    var timer = setInterval(run,5000);

    //给鼠标加入移入事件
    $(".pics li").mouseenter(function(){
        var jqthis = $(this);
        clearInterval(timer);
        //鼠标快速移动小bug
        tt = setTimeout(function(){

            //停止定时器
            //如果$(this)写在定时器里，那它指向的就是定时器
            i = jqthis.index();
            // 让i号图片显示，让它的兄弟元素隐藏,stop()清除累加动作；
            $(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000);
            //让li变红
            $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on");
        },200)

    })
    //鼠标移出事件
    $(".pics li").mouseleave(function(){
        //清除定时炸弹，这是为了解决鼠标快速滑动的小bug
        clearTimeout(tt);
        //恢复定时器
        timer = setInterval(run,5000);
    })


    //左右切换
    $("#prev").click(function(){
        clearInterval(timer);
        i--;
        //判断，让图片循环播放，还可以用三元表达式写
        // if(i==-1){
        //     i=4;
        // };
        i= (i==-1)?2:i;
        // 让i号图片显示，让它的兄弟元素隐藏
        $(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000);
        //让li变红
        $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on");


    });

    $("#next").click(function(){
        clearInterval(timer);
        //debugger
        run();


    });

})