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

標籤：des   java   使用   os   io   ar   art   div   

想必做移動前端的同學經常會接到這樣子的一個需求，就是在行動裝置頁面上的banner圖能夠用手指觸摸左右或上下的滑動切換，這在行動裝置是個很常見的一個效果，其使用者體驗遠甚於點擊一個按鈕地區，通過手指的觸摸操作也是行動裝置的中一個特性，我們必須專業化的處理，哈哈。其實實現原理很簡單，但平常中自己開發不是很方便。

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

 

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)：滑動方法

Swipe使用方法

瞭解基本函數方法後，我們就來看看使用方法。

首先是HTML結構：

<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 > figure {float: left;width: 100%;position: relative;}

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

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

在這裡只要把上面介紹的函數參數寫在裡面，就可以實現相對應的功能。

最後我們也可以給滑動切換添加上下按鈕：

<button onclick="Swipe.prev()">prev</button><button onclick="Swipe.next()">next</button>

到這裡我們已經完成了圖片滑動的效果了，是不是非常的方便快捷呢？趕緊動手試試看吧。

 

純屬記錄作用，想運用的同學自己百度下吧。