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");
}
})