最近在學習移動端的知識，學習了幾個外掛的使用，swipe和swiper都是移動端觸控滑動類的外掛，使用方便，比自己寫原生或者jQuery要簡單很多，今天先總結一下swipe的基本使用和應用，swiper功能更多更酷炫，改天詳細的總結一下。
swipe官網 github.com/bradbirdsal…
swipe.js是一個輕量級的移動滑動元件，支援觸控移動，支援響應式頁面。
使用方法：
- HTML
<section id="slider" class="swipe">
<ul class="swipe-wrap">
<li></li>
<li></li>
<li></li>
</ul>
</section>
複製程式碼結構有三層，最外層盒子要設定id和class，第二層盒子包裹著要滑動的元素要設定class，最內層就是滑動的元素了，不一定是ul和li，只要結構對了，用div也可以的。
- CSS
.swipe{
overflow: hidden;
position: relative;
}
.swipe-wrap{
over-flow:hidder;
position:relative;
}
.swipe .swipe-wrap li{
position: relative;
float: left;
}
複製程式碼這裡css中只保留了必須設定的樣式，其他樣式根據自己需要設定就可以了。
- JS中只需要新增一句
var slider = Swipe(document.getElementById('slider')
複製程式碼就可以實現拖動了！
swipe還提供了一些引數的設定：
var slider = Swipe(document.getElementById('slider'), {
1. startSlide Integer (預設:0) - swipe開始的索引,就是開始滑動的那一頁
2. speed Integer (預設:300) - 頁面過渡的速度
3. auto Integer - 自動滑動
4. continuous Boolean (預設:true) -是否可以迴圈播放
5. disableScroll Boolean (預設:false) - 停止觸控滑動
6. stopPropagation Boolean (預設:false) -停止事件傳播
7. callback Function - 在成功過渡後執行
8. transitionEnd Function - 在動畫結束後執行
});
複製程式碼swipe擴充套件了幾個函式，以便於更好的通過指令碼來控制滑動。
prev() 上一頁
next() 下一頁
getPos() 返回當前的索引
getNumSlides() 返回滑塊總數
slide(index, duration) 設定滑到的索引 (duration: 轉化的速度，單位毫秒)
複製程式碼swipe的問題：
- swipe只提供簡單輪播切換，想要在底部新增圓點顏色切換需要重新寫html（例子中有新增圓點）。
- 用手勢滑動之後，自動滾動就會失效，這時一個bug，需要將swipe.js外掛原始碼進行修改，新增一個判斷：
function stop() {
var delay = 0;
delay = options.auto > 0 ? options.auto : 0;
clearTimeout(interval);
}
複製程式碼- 適合簡單的輪播需求，體積小，減少資源消耗。
下面是利用swipe做了兩個小demo
1.模仿攜程移動端，banner部分使用swipe製作輪播效果。
圓點要新增html結構，並且在js中利用callback函式給當前圖對應的圓點加類名；圓點也要新增相應的點選事件。
2.模仿淘寶移動端平臺通知，利用swipe製作了一個可以手勢滑動切換的介面。