swipe.js的使用

简介

github：https://github.com/thebird/swipe

一个图片滚动的js组件，支持手势触屏。

使用方法

<div id=‘slider‘ class=‘swipe‘>
  <div class=‘swipe-wrap‘>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

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

这是个嵌套的container，

写js代码：

window.mySwipe = Swipe(document.getElementById(‘slider‘));

属性介绍

• startSlide Integer (default:0) - 起始div
• speed Integer (default:300) - 滑动速度
• auto Integer - 几毫秒后自动滚动（两次滚动间隔时间）
• continuous Boolean (default:true) - 无限循环
• disableScroll Boolean (default:false) - 禁止手势滑动
• stopPropagation Boolean (default:false) - stop event propagation 暂时不大明白它的作用
• callback Function - 切换时回调事件
• transitionEnd Function - 滑动到最后一页执行事件

方法介绍

• prev() 向后
• next() 向前
• getPos() 当前位置
• getNumSlides() 屏总数量
• slide(index,duration) 滑动到某一屏