王筝的博客
ruby学习

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

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

http://swipejs.com/

https://github.com/bradbirdsall/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>
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 – 在最后滑动转化是执行.