一、Swiper轮播插件简介
Swiper是一个基于jQuery封装的移动端轮播插件，支持自动播放、无缝轮播、触摸拖动、滑动回弹等功能，使用起来非常方便灵活。在网页设计中，轮播图是一种非常常见的页面元素，使用Swiper可以轻松实现这一功能。但有时候，我们希望在用户鼠标hover的时候停止轮播，以方便用户查看和点击操作，这时候需要对Swiper插件进行一定的修改和定制，下面就来详细介绍如何实现这个功能。
二、Swiper轮播插件主要设置
在使用Swiper轮播插件的时候，主要需要设置以下几个参数：
var mySwiper = new Swiper('.swiper-container',{
autoplay: true,//可选选项，自动滑动
speed: 1000,//可选选项，滑动速度
loop: true,//可选选项，开启循环
pagination: {//可选选项，分页器
el: '.swiper-pagination',
},
navigation: {//可选选项，前后按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
其中autoplay为自动播放选项，默认为true，开启自动轮播功能。如果要实现鼠标hover停止自动轮播的功能，需要在hover的时候手动停止轮播，然后在鼠标离开的时候再手动开启轮播，具体实现方式如下。
三、实现鼠标hover停止自动轮播
首先，我们需要手动停止自动轮播，具体实现方式是通过修改轮播容器的data属性值来实现：
$(".swiper-container").mouseenter(function(){
$(this).attr("data-swiper-autoplay","false");
mySwiper.autoplay.stop();
});
上述代码就是在鼠标进入轮播容器的时候，将data-swiper-autoplay属性值设置为false，然后调用Swiper的autoplay.stop()方法来停止轮播。接下来，我们需要在鼠标离开的时候重新开启轮播，具体实现方式是通过修改轮播容器的data属性值和调用Swiper的autoplay.start()方法来实现：
$(".swiper-container").mouseleave(function(){
$(this).attr("data-swiper-autoplay","true");
mySwiper.autoplay.start();
});
上述代码就是在鼠标离开轮播容器的时候，将data-swiper-autoplay属性值设置为true，然后调用Swiper的autoplay.start()方法来开启轮播。这样，在鼠标hover的时候就可以实现停止自动轮播的功能了。
四、完整代码实例
下面是一个完整的Swiper鼠标hover停止自动轮播的代码实例：
Swiper鼠标hover停止自动轮播 .swiper-container{
width: 500px;
height: 300px;
}
.swiper-slide{
text-align: center;
font-size: 18px;
background: #fff;
}Slide 1
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/205868.html
微信扫一扫 
支付宝扫一扫 