jquery轮播图实现

HTML代码

• 
• 
• 

css代码
.swiper_left{
position: relative;
}
.swiper_left ul{
width: 684px;
height: 275px;
display: flex;
overflow: hidden;
}
.swiper_left .slide_item{
position: absolute;
width: 100px;
justify-content: space-around;
right: 20px;
bottom: 20px;
display: flex;
}
.swiper_left .slide_item>span{
display: block;
width: 12px;
height: 12px;
border-radius: 50px;
background: #e3e3e3;
}
.swiper_left .slide_item>span .active2{
background: red;
}
.swiper_left>ul>li>img{
width: 684px;
height: 275px;
}

js代码
$(function(){
var count = 0,
timer = null;

timer = setInterval(addCount,4000);

$("section div.swiper_text .swiper_container .swiper_left ul").hover(()=>{
    clearInterval(timer);
    $(".btn").fadeIn(300);
},()=>{
    timer = setInterval(addCount,2000);
    $(".btn").fadeOut(300);
})

$("section div.swiper_text .swiper_container .swiper_left .slide_item>span").mouseover(function(){
    count = $(this).index();
    lbt();
})

/* $("#left").click(()=>{
addCount(true);
});
$("#right").click(()=>{
addCount();
}) */

function addCount(flag){
    if(flag){
        count--;
        if(count < 0){
            count = $("section div.swiper_text .swiper_container .swiper_left ul li").length-1;
        }
    }else{
        count++;
        if(count >= $("section div.swiper_text .swiper_container .swiper_left ul li").length){
            count = 0;
        }
    }
    lbt();
}

function lbt(){
    $("section div.swiper_text .swiper_container .swiper_left ul li").eq(count).fadeIn(500).siblings().fadeOut(500);
    $("section div.swiper_text .swiper_container .swiper_left .slide_item>span").eq(count).addClass("active2").siblings().removeClass("active2");
}

})