swiper移入暂停_轮播图swiper插件使用经验,swiper鼠标悬停暂停播放 - 网站笔记 - 百题资料...

最近做一个页面需要用到轮播图，感觉Swiper挺好用的，这里介绍一下在使用过程中的一些经验。因为插件功能太多，也不能面面俱到，这里就介绍一下使用的一些功能。

swiper下载：可以到swiper中文网下载使用。

Swiper基本使用

首先需要在网页里面引入一个js与一个css：

接着在body中做好轮播框架：

下一个

上一个

再来定义轮播图js，其配置选项可到官网API文档查看。var swiper = new Swiper('.web-imgs',{

autoplay:1,

loop:1,

loopedSlides: 1, //looped slides should be the same

navigation: {

nextEl: '.pbtn-next',

prevEl: '.pbtn-prev',

},

pagination: {

el: '.swiper-pagination',

dynamicBullets: 1,

},

});

这里介绍一下本例中使用到的一些参数：

autoplay：为设置自动播放；

loop：为设置循环播放，设置了循环播放后需要配套使用loopedSlides，即loopedSlides数值为轮播图的项目数，如果不一样则会出错；

navigation：中可以通过nextEl与prevEl设置翻页按钮；

设置好这些后基本就可以运行播放了。

Swiper鼠标悬浮暂停播放

但是我需要加一个鼠标悬浮暂停功能。这个其实在官方API中也有的，只是不好找。

如何设置鼠标悬浮时暂停播放，鼠标移开后再运行呢？使用下面的js就可以了。$('.web-imgs').mouseenter(function () {

swiper.autoplay.stop();

})

$('.web-imgs').mouseleave(function () {

swiper.autoplay.start();

})

需要注意的是【swiper.autoplay.stop();】中的swiper要与初始化中的名字一致【var swiper=new Swiper...】即上面红色加粗的部分，简单说就是指明要让哪一个暂停播放与自动播放。