swipe.js 轻松实现手机端滑动效果
浏览数：25 /
时间：2015年06月11日
插件下载地址
官网：http://www.swipejs.com
github：https://github.com/bradbirdsall/Swipe
插件特色
swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动开发中
使用方法
HTML代码如下：
<div id=‘slider‘ class=‘swipe‘> <div class=‘swipe-wrap‘> <div></div> <div></div> <div></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 = Swipe(document.getElementById(‘slider‘));
实例
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) {}
});
设置选项
- 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 - 动画运行结束的回调函数
还有一些比较使用的API方法，例如：
- prev()：上一页
- next()：下一页
- getPos()：获取当前页的索引
- getNumSlides()：获取所有项的个数
- slide(index, duration)：滑动方法
相关上下滑动插件：
iscroll.js
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
