实现鼠标经过缩略图(分页器,也就是下面的小圆点)实现自动切换
直接上代码
<div id="gallery-thumbs">
<div class="swiper-wrapper indexP-swiper-cont">
<div class="swiper-slide indexP-swiper-items" data-index="1">
这里是缩略图
</div>
<div class="swiper-slide indexP-swiper-items" data-index="2">
这里是缩略图
</div>
<div class="swiper-slide indexP-swiper-items" data-index="3">
这里是缩略图
</div>
</div>
</div>
以上为缩略图部分的代码,swiper部分不需要任何改变。上面代码注释加了一个data-index,绑定到了dom元素上,不会用的自行度娘去。data-index用来当鼠标移入时候获取到它的值,然后传递给swiper的slideTo(index, speed, runCallbacks)方法,具体见slideTo详解,以下为js代码
var mySwiper = new Swiper("#gallery-top", {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
thumbs: {
swiper: {
el: "#gallery-thumbs",
spaceBetween: 10,
slidesPerView: 3,
watchSlidesVisibility: true
/*避免出现bug*/
},
slideThumbActiveClass: "my-slide-thumb-active"
}
});
$(".indexP-swiper-items").hover(function(e) {
// 取到绑定在indexP-swiper-items上的data-index
console.log(e.currentTarget.dataset.index);
let indexTo = e.currentTarget.dataset.index;
// 然后调用swiper的mySwiper.slideTo(index, speed, runCallbacks)
mySwiper.slideTo(indexTo, 1000, false); //切换到第一个slide,速度为1秒
},function(){
// 鼠标移出回复自动轮播
mySwiper.autoplay.start();
});