前言
最近需要開發一個新的“微信活動平臺”，手機端主頁需要用到一個幻燈片。因為好一段時間沒有全部手寫移動端頁面了，遂又重新找了一個下有沒有什麼好的幻燈片外掛，畢竟重複造輪子沒有必要啊。
綜合比較後發現，Swipe 這款外掛還是比較不錯的，所以這裡特地寫一篇文章以像大家推薦，並且作為記錄，方便下次檢視。
簡介
Swipe 是一個輕量級的移動滑動元件，這點從檔案大小不難看出。它支援 1:1 的觸控移動，阻力以及防滑。單純從移動端來使用，應該滿足基本的需求了。
說明
從github下載後，可以發現，總共就8個檔案，其中可能真正專案中用得到的，也基本就是1個 swipe.js 檔案。index.html 和 style.css 本身是作為演示存在的，有興趣的可以研究一下。
那麼我們具體如果使用它呢？很簡單，基本只要如下程式碼即可：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 首先引入JQuery -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入核心swipe.js檔案 -->
<script src="swipe.js"></script>
<!-- 幻燈片基礎樣式 -->
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
font-size:140px; /* 這裡樣式是為了演示方便，我特意加的 */
}
</style>
</head>
<body>
<!-- 幻燈片例項代買，前兩層是外圍容器 -->
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<!-- 這三個是幻燈片內容，其中1，2,3等數字可換成圖片，樣式根據需求更改即可 -->
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<!-- 頁面幻燈片執行指令碼（初始化） -->
<script>
window.mySwipe = Swipe(document.getElementById('slider'));
</script>
</body>
</html>以上程式碼執行結果：
透過滑鼠點選或者放到手機上手指滑動，就可以看見幻燈片的執行效果了。當然，當前只是最基本的，全部都是預設配置。我們完全可以透過下面提供的引數，結合自己的需求，自義定出更好的效果來。
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)（自動滑動，單位為毫秒）
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（停止事件傳播,預設值flase）
callback Function - runs at slide change.（回撥函式）
transitionEnd Function - runs at the end slide transition.（滑動過渡時呼叫的函式）下面就是官方給的演示例子：
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) {}
});從中我們不難看出具體引數的使用方法和位置。這一個如果感興趣，可以根據需要，自己加入引數試試，都是以json物件存在於Swipe的第二個引數的。
那麼除了以上引數，Swipe還提供了一些常用的方法（API）:
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)（指數，持續時間）滑動設定索引位置（持續時間：轉型速度以毫秒為單位）都是一些簡單的介面方法，你可以Js呼叫他們以達到你想要的效果。