移动端的内容滑块js库 swipe.js

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

swipe.js 是一个轻量级的移动端内容滑块，类似于pc端的slide.js，用于实现轮播广告或其他内容滑动模块 ,支持移动端屏幕滑动手势操作。此库不依赖于任何其他的js库，可独立使用

使用swipe.js时只需将下载好的文件引用到页面，然后在页面中写好对应的结构

<div id="slider" class="swipe">
    <div class="swipe-wrap">
        <div></div>
        <div></div>
        <div></div>
    </div>    
</div>

 

这里需要里外两层div,内层div里的内容自定，在调用Swipe方法的时候，将外层div传入方法

window.mySwipe = Swipe(document.getElementById(‘slider‘));

使用Swipe需要将一些样式加入你的css文件

 1 .swipe {
 2   overflow: hidden;
 3   visibility: hidden;
 4   position: relative;
 5 }
 6 .swipe-wrap {
 7   overflow: hidden;
 8   position: relative;
 9 }
10 .swipe-wrap > div {
11   float:left;
12   width:100%;
13   position: relative;
14 }

调用swipe的例子

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

Swipe的属性分别表示

startSlide——整数，默认为0，表示滑动块开始滑动的内容块在父级元素中的索引位置

speed——毫秒数，默认300，表示前后滑块切换完成的时间（毫秒数）

auto——毫秒数，表示自动播放的轮播停留的播放时间（从切换到当前帧到开始切换下一帧）

continuous——布尔值，表示是否循环播放滑块

stopPropagation——默认false，阻止事件冒泡

disableScroll——默认false ，当滚动页面时，停止侦听滑块上的触碰事件

callback——function 在slide变化时调用

transitionEnd——function 在slide 切换完成时调用

Swipe API

一些可增加对滑动块控制的方法

prev() 滑到前一张

next() 滑到下一张

getPos() 返回当前滑动页的索引值

getNumSlides() 返回滑动块总共的页数

slide(index, duration) 滑动到指定索引index的那一页，duration表示滑动的speed

浏览器支持

swipe兼容所有浏览器（ie7+）,尤其适合那些支持transform和transition css3属性的浏览器，当然不支持也还是可以用。资料来自 https://github.com/thebird/Swipe 

移动端的内容滑块js库 swipe.js,,5-wow.com

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

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

相关文章

随机文章

您可能还喜欢

您可能还喜欢