利用Swipejs轻松实现手机上的图片手势切换

【原创】转载请注明出处，独立博客地址http://www.92ez.com

插件官网：http://www.swipejs.com

github地址：https://github.com/bradbirdsall/Swipe

使用方法：

按照下图代码的形式完成html部分

以上代码表示了两个容器，里面容器内包裹了单个项目，下面给容器添加事件

作者建议最好将事件绑定这个js放到页面的最底部，这样保证了页面已经加载完毕后再进行绑定，不会出现对象不存在的情况，当然，仅仅上面那些是不够的，还需要对容器进行一些样式的定义，OK，see the css code

是不是很简单。这样就实现了一个简单的手势切换图片的功能。当然，这个插件并不是只有这个功能，下面介绍更多的参数设定。

• startSlide Integer (default:0) - index position Swipe should start at　　（滑动开始的索引值，默认值为0）

• speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑动的速度，默认值300毫秒）

• auto Integer - begin with auto slideshow (time in milliseconds between slides)（自动开始滑动，间隔时间为speed的值）

• continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循环播放，无终点，默认值为true）

• disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（当滚动滚动条的时候停止容器的滑动事件，默认值flase）

• stopPropagation Boolean (default:false) - stop event propagation（停止事件的累积）

• callback Function - runs at slide change.（回调函数）

• transitionEnd Function - runs at the end slide transition.（滑动过渡时调用的函数）

额，上面翻译的不知道准不准，有错误的话请联系我，以便及时更正。谢谢。

下面给出一个简单的参数配置的例子

此插件内置也有几个非常实用的方法，

prev() slide to prev（上一页）

next() slide to next（下一页）

getPos() returns current slide index position（获取当前页的索引）

getNumSlides() returns the total amount of slides（获取所有项的个数）

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（滑动方法）

 

 

转载于:https://www.cnblogs.com/cydmk/archive/2013/04/17/3026280.html