jQuery循环轮播图插件——swiper.js
之前一直想搜寻一个轮播插件，要求兼容性好，支持移动端，可以拓展等等...
于是在网上寻寻觅觅，终于，让我找到了一个插件—— swiper.js
废话不说，看下面：
Swiper使用方法
1.首先加载插件，需要用到的文件有 swiper.min.js 和 swiper.min.css 文件。立即下载
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ... 5 <link rel="stylesheet" href="path/to/swiper.min.css"> 6 </head> 7 <body> 8 ... 9 <script src="path/to/swiper.min.js"></script> 10 </body> 11 </html>
如果你的页面加载了 jQuery.js 或者 zepto.js ，你可以选择使用更轻便的 swiper.jquery.min.js 。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ... 5 <link rel="stylesheet" href="path/to/swiper.min.css"> 6 </head> 7 <body> 8 ... 9 <script src="path/to/jquery.js"></script> 10 <script src="path/to/swiper.jquery.min.js"></script> 11 </body> 12 </html>
2.接下来就是HTML该如何写了，在其css文件中，已经对样式做出了修改，所以遵循以下规则即可。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> <!-- 导航等组件可以放在container之外 -->
3.如果你想要给 Swiper 定义一个大小，当然不要也行。
.swiper-container { width: 600px; height: 300px; }
4.初始化 Swiper ：最好是挨着</body>标签
1 var mySwiper = new Swiper ('.swiper-container', { 2 direction: 'horizontal', 3 loop: true, 4 5 // 如果需要分页器 6 pagination: '.swiper-pagination', 7 8 // 如果需要前进后退按钮 9 nextButton: '.swiper-button-next', 10 prevButton: '.swiper-button-prev', 11 12 // 如果需要滚动条 13 scrollbar: '.swiper-scrollbar', 14 })
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
1 <script type="text/javascript"> 2 window.onload = function() { 3 ... 4 } 5 </script>
或者这样（Jquery和Zepto）
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 ... 4 }) 5 </script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了
最后，附上传送门API文档
