首页 > 代码库 > swipe.js 轻松实现手机端滑动效果
swipe.js 轻松实现手机端滑动效果
插件下载地址
官网: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
swipe.js 轻松实现手机端滑动效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。