码迷,mamicode.com
首页 > 移动开发 > 详细

移动端触摸滑动插件swipe.js

时间:2014-11-25 15:51:24      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:http   io   ar   os   使用   sp   on   div   2014   

插件特色

swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常可见使用在移动前端开发中。

使用方法

下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可。

<div id=‘slider‘ class=‘swipe‘>
  <div class=‘swipe-wrap‘>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
window.mySwipe = Swipe(document.getElementById(‘slider‘));
.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 - 动画运行结束的回调函数

实例

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);
  }

下面的演示页面就是修改后的,会一直在滚动状态。(来源

演示和下载

下载地址   演示地址(手机扫描下面二维码)

bubuko.com,布布扣

移动端触摸滑动插件swipe.js

标签:http   io   ar   os   使用   sp   on   div   2014   

原文地址:http://www.cnblogs.com/cyweb/p/4120847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!