初识swipe.js
来源:互联网 发布:myeclipse build js 编辑:程序博客网 时间:2024/05/20 07:50
正如大家所知道的,楼主最近做h5页面,各种恶补移动端姿势,这个swipe.js也算做其中之一.
swipe是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面。
http://swipejs.com/
https://github.com/bradbirdsall/Swipe
现在来看一下html代码:
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div class='wrap'></div> <div class='wrap'></div> <div class='wrap'></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 = 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) {}});
Swipe可以扩展可选参数-通过设置对象的键值对:
startSlide Integer (默认:0) - Swipe开始的索引
speed Integer (默认:300) - 前进和后台的速度,单位毫秒.
auto Integer - 自动滑动 (time in milliseconds between slides)
continuous Boolean (默认:true) -是否可以循环播放(注:我设置为false好像也是循环的)
disableScroll Boolean (默认:false) - 停止触摸滑动
stopPropagation Boolean (默认:false) -停止事件传播
callback Function - 回调函数,可以获取到滑动中图片的索引.
transitionEnd Function - 在最后滑动转化是执行.
0 0
- 初识swipe.js
- Swipe JS
- Swipe.js插件介绍
- Swipe JS滑动插件
- swipe js插件
- touch.js-swipe
- swipe js插件使用
- 使用swipe.js做幻灯片
- swipe.js插件相关用法
- Swipe-移动端触摸滑动插件swipe.js
- swipe笔记 swipe.js 轻松实现手机端滑动效果
- 移动端轮播插件Swipe.js 2.0 优化
- 移动web滑动效果Swipe JS插件
- swipe.js移动端滑动插件
- zepto.js中swipe失效问题
- js初识,博客初识
- 初识js
- 初识JS
- Android中的Button自定义点击效果
- anroid json 解析
- Sql server 使用存储过程分页显示
- Sharepoint Day by Day
- asp 多文件同时上传程序
- 初识swipe.js
- 使用windows live writer离线写csdn博客
- MongoDb集群
- openoffice 安装和使用
- fatal error C1010: 在查找预编译头时遇到意外的文件结尾
- python的函数参数传递
- Capturing 'request' strongly in this block is likely to lead to a retain cycle
- 关于ListView顶部和底部滚(拖)动出现阴影解决方案
- Cocos2d-x函数----addChild()