Swipe-移动端触摸滑动插件swipe.js

插件特色

swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。

使用方法

下面是一个比较简单的使用例子，添加适当的HTML代码和js代码即可。

<div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div></div> </div> </div> //code from http://caibaojian.com/swipe.html window.mySwipe = Swipe(document.getElementById('slider')); .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }

设置选项

startSlide Integer (default:0) - 开始滚动的位置speed Integer (default:300) - 动画滚动的间隔（秒数）auto Integer - 开始自动幻灯片（以毫秒为单位幻灯片之间的时间）continuous Boolean (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动stopPropagation Boolean (default:false) - 是否停止事件冒泡callback Function - 幻灯片运行中的回调函数transitionEnd Function - 动画运行结束的回调函数

实例

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) {} });

注意

1、原始的Swipe JS，当你用点击或者手势控制了之后，轮播图就不会自动滚动了，目前sina.cn网页也是这个设计逻辑，但是有些客户不给他自动滚动心理就不舒服，解决办法是修改原swipe.js的stop函数如下：·

function stop() { //delay = 0; delay = options.auto > 0 ? options.auto : 0; clearTimeout(interval); } 来源： 前端开发博客