移动端无缝轮播插件, 无依赖 , 触摸拖拽, 支持水

#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、网站不提供资料下载,如需下载请到原作者页面进行下载。