web前端开发小插件之swiper轮播图

一、web前端开发小插件之swiper轮播图

1、前端开发是现在比较火的一个职业，当然前端工程师的水平也是参差不齐，小编也是其中一员，技术还在努力提高中。在前端开发中经常会遇到要做轮播图的时候，一般在网站首页。网上有很多的轮播图插件，小编要介绍的就是一款跨PC跟移动平台的轮播图插件——swiper。

2、swiper的用户很多，因为它确实太好用了，因为它同时支持移动和pc端，版本3及以上是不支持IE8的，需要兼容IE8的小伙伴需要使用版本2。

3、从官网找到下载链接，直接下载swiper相关js跟css，小编这里就不贴链接了，可以按需下载，有jquery版跟zepto版等。

4、swiper的html有固定的结构，首先要引入相关css样式及js，当然css是可以自定义的。html结构不能变，最简单的例子如下图：

5、如果光有个自动轮播功能那也就不稀奇了，swiper可以有很多配置选项的，所以受到了广大用户的青睐，比如自定义滚动时间、方向、动画切换效果等等，还有许多事件就不一一列举了，需要的小伙伴可以去官网看哦！

二、Swiperjs插件轮播滑动卡顿优化

插件地址：

自动轮播几十个item，组件滑动卡顿明显，轮播个数为20个以下表现正常。

轮播前，渲染所有的swiper-item，dom元素一口气循环挂载到dom树上，当swiper-item个数很多的时候，dom节点内存增大，监听事件占用的内存也逐渐加大，所以出现滑动卡顿现象。

NotethataccordingtoVirtualSlidesrealizationitdoesn'tworkwithloopmode,slidesPerColumnmorethan1andslidesPerView:'auto'

具体实现：1、获取当前轮播的index。

2、加载轮播窗口附近dom元素、数组中最前和最后三个swiper-item，其他用空代替。

当前loop:true，无限循环模式，Swiper复制了两份swiper-item（slideDuplicateClass），分别添加在原始的swiper-item前后位置，但是slideDuplicateClass只在Swiper初始化的时候渲染，之后动态显示窗口附近的dom元素，无法改变slideDuplicateClass的dom的结构，就会出现轮播到最后一个的时候空屏的情况。

无限循环轮播的核心就在于头尾多出的两张图，从图三再向后滑动，会滑到红色图一，这个时候给用户的感觉就是无缝从最后一张滑动到第一张的，当他滑到占位图一时，我们再瞬间切换到粉色图一（即真正的图一），由于是瞬间变换，用户是感知不到的。

可视窗口显示三张图片：保留数组中最前和最后三个swiper-item，在初始化的时候slideDuplicateClass就有相应的renderItem。比如当轮播index为最后一个元素9，下一个应该为slideDuplicateClass的index=0元素，解决空屏问题。

三、swiper插件 滑动到某屏时,如何处理的函数

1、如果是在pc端，想切换到第三页，可以直接点击底部的第三个小圆圈，想点击按钮跳到“第三页”，直接模拟点击第三个小圆圈就可以，可以写：$('.swiperpaginationspan').eq(2).trigger('click');

2、也可以写：swiper.slideTo(3, 1000, false)，即可。

slideTo方法有三个参数：第一个参数是指定切换到某一页的索引；第二个参数是切换速度；第三个参数是布尔值，表示是否要触发onSlideChange回调函数。

Swiper插件有可供选择的动画效果插件Swiper Animate，在这个插件里面有很多可供选择的动画比如缩放、旋转、摇晃等各种动画效果。

1、在使用Swiper Animate之前，必须要保证已经加载swiper.animate.min.js和animate.min.css。

2、在需要运动的元素上面增加类名 ani，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp

swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s

swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s