常用的JS插件介绍：4、swipe.js——手势幻灯片

来源：互联网发布：鲁班软件官网编辑：程序博客网时间：2024/06/02 02:41

简介

github：https://github.com/thebird/swipe

一个图片滚动的js组件，支持手势触屏。

使用方法

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

.swipe {  overflow: hidden;  visibility: hidden;  position: relative;}.swipe-wrap {  overflow: hidden;  position: relative;}.swipe-wrap > div {  float:left;  width:100%;  position: relative;}

这是个嵌套的container，

写js代码：

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

属性介绍

startSlide Integer (default:0) - 起始div
speed Integer (default:300) - 滑动速度
auto Integer - 几毫秒后自动滚动（两次滚动间隔时间）
continuous Boolean (default:true) - 无限循环
disableScroll Boolean (default:false) - 禁止手势滑动
stopPropagation Boolean (default:false) - stop event propagation 暂时不大明白它的作用
callback Function - 切换时回调事件
transitionEnd Function - 滑动到最后一页执行事件

方法介绍

prev() 向后
next() 向前
getPos() 当前位置
getNumSlides() 屏总数量
slide(index,duration) 滑动到某一屏

0 0