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

标签：des   style   blog   http   color   使用   

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,布布扣,bubuko.com

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

标签：des   style   blog   http   color   使用   

原文地址：http://www.cnblogs.com/zhangyuping/p/3841081.html