正如大家所知道的,楼主最近做h5页面,各种恶补移动端姿势,这个swipe.js也算做其中之一.

swipe是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面。

http://swipejs.com/

https://github.com/bradbirdsall/Swipe

 

现在来看一下html代码:

css代码:

.swipe {
     overflow: hidden;  visibility: hidden;  position: relative;}.swipe-wrap {
     overflow: hidden;  position: relative;}.swipe-wrap > div {
     float:left;  width:100%;  position: relative;}

js代码:

window.mySwipe = new Swipe(document.getElementById('slider'), {  startSlide: 2,  speed: 400,  auto: 3000,  continuous: true,  disableScroll: false,  stopPropagation: false,  callback: function(index, elem) {},  transitionEnd: function(index, elem) {}});

Swipe可以扩展可选参数-通过设置对象的键值对:

• 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 - 在最后滑动转化是执行.