插件特色
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'));
//code from http://caibaojian.com/swipe.html
.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 - 动画运行结束的回调函数
实例
//code from http://caibaojian.com/swipe.html
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);
}
下面的演示页面就是修改后的,会一直在滚动状态。(来源)
演示和下载
下载地址 演示地址(手机扫描下面二维码)
插件特色
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'));
//code from http://caibaojian.com/swipe.html
.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 - 动画运行结束的回调函数
实例
//code from http://caibaojian.com/swipe.html
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);
}
下面的演示页面就是修改后的,会一直在滚动状态。(来源)
演示和下载
下载地址 演示地址(手机扫描下面二维码)