轮播图在□□□网站中使□□□□用的比例◆非常之高，自己手写◥一个轮播□□□□比较费时•间，而使用swiper（swiper3）轮播插件□□□能很方便□□做出图片□□轮播效果，兼容性好，而且还支○持响应式♦轮播。在项目引□□□入swiper.jquery.min.js和swiper.jquery.min.css文件，html如图：

js如图：


 
如此一个◇简单的轮□□□□播图就制□□□作完成了，当然一般□□□网站的轮□□□播图不会□□□如此简单，这里就需□□□用到swiper的api了，js如图：
 

 
这里面包□□含的自动、循环、响应式、控制按钮、显示个数□□□□等功能的□□□□轮播，当然swiper的功能不•止这些，还有很多□□□□的api实现的功□□□能。
更多功能Api：
onSlideChangeEnd(swiper)：回调函数，swiper从一个slide过渡到另一个slide结束时执行。可接受swiper实例作为参数。
Effect：slide的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
paginationType：分页器样式类型，可选：‘bullets’  圆点（默认）、‘fraction’  分式 、‘progress’  进度条、‘custom’ 自定义。
lazyLoading：设为true开启图片延迟加载，使preloadImages无效。
需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图的延迟加载则增加属性data-background。当设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
controlBy：设定Swiper相互控制□□时的控制□□□方式。当两个swiper的slide数量不一□□□□致时可用。默认为'slide'，自身切换□□一个slide时，被控制方◣也切换一□□□□个slide。
可选：'container'，按自身slide在container中的位置比例进行控制。
Observer：启动动态□□□检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素◤时，自动初始□□化swiper。默认false，不开启，可以使用update()方法更新。
onTransitionEnd(swiper):回调函数，过渡结束时触发，接收Swiper实例作为参数。
如果你使□□用setWrapperTranslate和setWrapperTransition来设定wrapper移动，这个函数丨不会触发，你可以使□□□□用原生transitionEnd事件。
人为中断过渡不会触发这个函数。