最近在做手机站点的时候，有一个需求，就是需要页面上的banner图能够用手指触摸左右的滑动切换的效果，这也是一个很常见的效果，很多移动网站都能看到。由于是刚接触，去网上搜索了一把，才认识是使用swipe.js，后来使用了感觉真的很不错的，也很好用的，看了些资料，其实Swipe.js是一个轻量级的移动滑动组件，能支持精确的触摸移动操作，支持响应式页面，而且还可以设置自动播放等等实用性的功能，阻力以及防滑性能都不错，可以让移动web应用展现更多的内容，能解决我们对于移动Web对滑动的需求。下面我就说说一下swipe.js的用法
github：https://github.com/bradbirdsall/Swipe
demo:请猛击这里
Swipe用法其实挺简单直观得，首先我们需要添加一段很简单的html代码，如下
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div class='wrap'></div>
<div class='wrap'></div>
<div class='wrap'></div>
</div>
</div>
他外层套有2层div，里面包裹的三个DIV（class=”wrap”）即是滑动的模块了，你可以在这些div里添加你想要的内容。
那么之后我们就可以在滑块结束后面或页面底部添加事件代码了：
最外面的div（即id=”slider”）需要设置一下如下的js函数：
window.mySwipe = Swipe(document.getElementById('slider'));
那么，同样的，css样式里，需要添加一些Swipe样式代码，如下：
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
startSlide Integer (默认:0) – Swipe开始的索引
speed Integer (默认:300) – 前进和后台的速度，单位毫秒.
auto Integer – 自动滑动 (time in milliseconds between slides)
continuous Boolean (默认:true) -是否可以循环播放（注：我设置为false好像也是循环的）
disableScroll Boolean (默认:false) – 停止触摸滑动
stopPropagation Boolean (默认:false) -停止事件传播
callback Function – 回调函数，可以获取到滑动中图片的索引.
transitionEnd Function – 在最后滑动转化是执行.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2, //起始图片切换的索引位置
speed: 400, //前进和后台的速度，单位毫秒.
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true, //无限循环的图片切换效果
disableScroll: true, //阻止由于触摸而滚动屏幕
stopPropagation: false, //停止滑动事件
callback: function(index, elem) {}, //回调函数，切换时触发
transitionEnd: function(index, elem) {} //回调函数，切换结束调用该函数。
});
不过swipe也有自己的优缺点，
滑动与防滑性能非常不错，用户体验较好
