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

半年前 644次浏览

最近做一个页面需要用到轮播图,感觉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...】即上面红色加粗的部分,简单说就是指明要让哪一个暂停播放与自动播放。

相关评论
暂无相关评论...
发表评论
评论说明:

1、评论暂仅只持纯文字评论。

2、请不要发表与内容无关的评论。

3、评论需要经由审核才能显示出来。

4、评论姓名与链接无要求,只要评论内容符合便可审核通过。

百题资料微信二维码
微信公众号
百题资料APP二维码
题库小程序