移动端无缝轮播插件, 无依赖 , 触摸拖拽, 支持水
#mbSlider.js ##移动端 无缝轮播插件,无依赖,轻巧
在线演示:http://www.byex.cn/mbSlider
Written by: hishion
##使用步骤
###Step 1: 引入资源文件
<!-- mbSlider CSS file --> <link href="mbSlider.css" rel="stylesheet" /> <!-- mbSlider Javascript file --> <script src="mbSlider.js"></script>
###Step 2: 编写html
<div class="mb-container"> <div class="mb-wrapper"> <div class="mb-slide">1</div> <div class="mb-slide">2</div> <div class="mb-slide">3</div> </div> </div>
###Step 3: 调用 mbSlider
var app = new mbSlider({ container: '.mb-container' });
##配置项
以下参数全部为默认值
var app = new mbSlider({
container: '.mb-container',
wrapper: '.mb-wrapper',
itmes: '.mb-slide',
//自动播放 : Number/ms || Boolean
autoplay: 4500,
//动画持续时间 Number/ms
duration: 300,
//方向 : 'vertical||horizontal'
direction: 'horizontal',
//是否显示左右按钮
isControl: false,
//是否显示分页按钮
isPages: false,
//滑动开始
tapStart: function(){
//console.log('tapStart!')
},
//滑动中
tapMove: function(){
//console.log('tapMove!')
},
//滑动结束
tapEnd: function(){
//console.log('tapEnd!')
},
//运动结束
aniStart: function(){
//console.log('aniStart!')
},
//运动结束
aniEnd: function(){
console.log('aniEnd!')
},
//浏览器前缀
engine: ['webkit', 'ms', 'o', 'moz']
});
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。