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

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

时间:2014-07-13 19:43:55      阅读:304      评论:0      收藏:0      [点我收藏+]

标签: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

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