swipe JS – 移動WEB頁面內容觸摸滑動類庫

標籤：des   style   blog   http   color   os   java   使用   io   

swipe.js文檔及用法

   今天帶來一個輕量級js觸摸滑動類庫-swipe JS，這是一個非常小的一個javascript類庫，但他的功能卻不簡單，它可以用來展示web頁面上的任何內容，支援精確的觸摸移動操作，而且還可以設定自動播放、等比例縮放等等實用性的功能；

一、用法

Swipe只需添加很簡單的一段代碼即可，如下

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

以上代碼是最初需要的結構--一系列元素包裹在兩個容器中，你可以在wrap中添加任何你想要的內容。最外面的div（即slide）需要設定一下的js函數：

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

同樣的，Swipe需要往樣式表中添加一些代碼

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

二、Swipe函數介紹

下面就為大家介紹下Swipe JS的使用方法，Swipe有以下幾個參數：

startSlide: 4,  //起始圖片切換的索引位置auto: 3000, //設定自動切換時間，單位毫秒continuous: true,  //無限迴圈的圖片轉場效果disableScroll: true,  //阻止由於觸摸而滾動螢幕stopPropagation: false,  //停止滑動事件callback: function(index, element) {},  //回呼函數，切換時觸發transitionEnd: function(index, element) {}  //回呼函數，切換結束調用該函數。

除此之外，還有一些比較使用的API方法，例如：

• prev()：上一頁
• next()：下一頁
• getPos()：擷取當前頁的索引
• getNumSlides()：擷取所有項的個數
• slide(index, duration)：滑動方法

最後設定JS綁定以及參數設定：

var slider = Swipe(document.getElementById(‘slider‘), {   …………   …………});

或者舉例

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

執行個體效果可以查看：http://www.jiawin.com/demos/swipe-mobile-touch-slider/index.html

執行個體效果下載網址：http://yunpan.cn/QazPw6F4mZKH6

swipe JS – 移動WEB頁面內容觸摸滑動類庫