一、简介
①Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。
③主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。
二、文档
①中文网址：http://2.swiper.com.cn/
②中文网地址：http://www.swiper.com.cn/
③Swiper目前有Swiper2、Swiper3、Swiper4几个版本，每个版本的使用方法可能会有所不同，具体参照文档
三、使用方法
①加载
- 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
<link rel="stylesheet" href="path/to/swiper.min.css"> ... ... <script src="path/to/swiper.min.js"></script>
- 如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js
... <link rel="stylesheet" href="path/to/swiper.min.css"> ... <script src="path/to/jquery.js"></script> <script src="path/to/swiper.jquery.min.js"></script>
②HTML内容
<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>
③初始化
- 初始化Swiper：最好是挨着</body>标签 （函数调用）
<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) </script> </body>
- 如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化
<script type="text/javascript"> window.onload = function() { ... } </script> 或者这样（Jquery和Zepto） <script type="text/javascript"> $(document).ready(function () { ... }) </script>
四、示例（轮播图）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>轮播图</title> <!-- 引入swiper3.0 css文件 --> <link rel="stylesheet" href="swiper/css/swiper.min.css"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } .container { position: relative; width: 750px; margin: 0 auto; } </style> </head> <body> <!-- 版心 --> <div class="container"> <!-- 轮播图 --> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="#"><img src="images/banner01.jpg" alt=""></a></li> <li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li> <li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li> <li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li> <li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li> <li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li> <li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li> <li class="swiper-slide"><a href="#"><img src="images/banner08.jpg" alt=""></a></li> </ul> <!-- 分页器 --> <div class="swiper-pagination"></div> </div> </div> <!-- 引入swiper3.0插件脚本 --> <script src="swiper/js/swiper.min.js"></script> <!-- js初始化脚本 --> <script> window.onload=function(){ /* 轮播图 */ new Swiper('.swiper-container',{ autoplay:1000, loop:true, pagination:'.swiper-pagination', autoplayDisableOnInteraction:false }); } </script> </body> </html>
