利用swiper.js 实现 html5 模仿手指滑动切屏效果

需求：实现用手指滑动切屏效果

技术：swiper.js 

实现步骤：

1、swiper中文网址：http://www.swiper.com.cn/api/。我不建议看这个网址，以为写的很乱，和 http://www.w3school.com.cn  网站一边教学一边实践没得比。

2、从swiper中文网址下载两个API，“idangerous.swiper.css”和“idangerous.swiper.min.js”。把这两个文件导入html5 中：

<link rel="stylesheet" href="css/idangerous.swiper.css">
<script src="js/idangerous.swiper.min.js"></script>

3、实现 swiper标准格式，之所以叫“标准”是因为里面的 class 名称不要改变，否则相应的功能不能实现（如果你很NB，可自行修改）。

<div class="swiper-container">
  <div class="swiper-wrapper">
  <!--First Slide-->
    <div class="swiper-slide"> 
    <!-- 这里添加第一个HTML内容 -->
    </div>      
    <!--Second Slide-->
    <div class="swiper-slide">
    <!--  这里添加第二个HTML内容 -->
    </div> 
    <!--Third Slide-->
    <div class="swiper-slide"> 
    <!--  这里添加第三个HTML内容 -->
  </div>
  <!--Etc..-->
</div>

4、修改idangerous.swiper.css，设置swiper 的宽度和高度 :

<span style="font-family:Times New Roman;font-size:14px;">* {
	margin: 0;
	padding: 0;
}
.swiper-container {
	width: 100%;
	height: 900px;

}</span>

5、添加一段JS代码：

<script type="text/javascript">
<span style="white-space:pre">	</span>var mySwiper = new Swiper('.swiper-container',{
<span style="white-space:pre">		</span>mode:'vertical',
<span style="white-space:pre">	</span>});  
</script>

JS里面的属性内容，请查看 swiper中文网址：http://www.swiper.com.cn/api/。

最后：以上步骤是我尝试了一个周末的时间搞出来的最简单并且可行的滑动效果代码，如果各位看官按上面的步骤没有实现成功。请先仔细检查自己的代码是否完全和案例一样。如果仍不能实现，请留言。