swipe.js 轻松实现手机端滑动效果

浏览数：25 / 时间：2015年06月11日

插件下载地址

官网：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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢