swipe.js 輕鬆實現手機端滑動效果

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

外掛程式

官網：http://www.swipejs.com
github：https://github.com/bradbirdsall/Swipe

 

外掛程式特色

swipe.js是一個比較有名的觸摸滑動外掛程式，它能夠處理內容滑動，支援自訂選項，你可以讓它自動滾動，控制滾動間隔，返回回呼函數等。經常可見使用在移動開發中

 

使用方法

HTML代碼如下：

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

CSS代碼如下：

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

JS代碼：

window.mySwipe = 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) {}});

 

設定選項

• startSlide Integer (default:0) - 開始滾動的位置
• speed Integer (default:300) - 動畫滾動的間隔（秒數）
• auto Integer - 開始自動投影片（以毫秒為單位投影片之間的時間）
• continuous Boolean (default:true) - 建立一個無限的迴圈（當滑動到所有動畫結束時是否迴圈滑動）
• disableScroll Boolean (default:false) - 當滾動捲軸時是否停止投影片滾動
• stopPropagation Boolean (default:false) - 是否停止事件冒泡
• callback Function - 投影片運行中的回呼函數
• transitionEnd Function - 動畫運行結束的回呼函數

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

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

 

相關上下滑動外掛程式：

iscroll.js

swipe.js 輕鬆實現手機端滑動效果