常用的JS插件介绍：4、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) 滑动到某一屏