轮播图swiper插件使用经验，swiper鼠标悬停暂停播放

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

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

Swiper基本使用

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

<link href="/template/style/css/swiper.min.css" rel="stylesheet">
<script src="/template/style/js/swiper.min.js" charset="utf-8"></script>

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

<div class="web-imgs">
    <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img1.jpg"></div>
    <div class="swiper-slide"><img src="img2.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="pbtn-next">下一个</div>
    <div class="pbtn-prev">上一个</div>
</div>

再来定义轮播图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...】即上面红色加粗的部分，简单说就是指明要让哪一个暂停播放与自动播放。