swiper 增加一个鼠标移入分页器的小点后就切换展示图片

本人处理的方法是:

1、头部加载插件: <link rel="stylesheet" href="swiper.min.css"> <script src="swiper.min.js"></script> 2、html部分: <div class="swiper-container">   <div class="swiper-wrapper">     <div class="swiper-slide">Slide 1</div>     <div class="swiper-slide">Slide 2</div>     <div class="swiper-slide">Slide 3</div>   </div>   <!-- 如果需要分页器 -->   <div class="swiper-pagination"></div> </div> 3、js部分: $(document).ready(function() { var mySwiper = new Swiper(\'.swiper-container\', { loop:true, autoplay:true, pagination: { el: \'.swiper-pagination\', clickable: true, } }); //此方法为模拟的,hover到分页器的小圆点后自动触发其本身的click事件 $(".swiper-pagination-bullet").hover(function() { $(this).click(); //鼠标划上去之后,自动触发点击事件来模仿鼠标划上去的事件 },function() { mySwiper.autoplay.start(); //鼠标移出之后,自动轮播开启 }) })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwgyzg.html