最近在做我們自己長(zhǎng)沙網(wǎng)站建設(shè)官網(wǎng)的手機(jī)版，其中在微門戶部分要用到一個(gè)幻燈片的地方，其實(shí)用js或者js的框架之一jq寫一個(gè)pc端的這種效果比較容易的，但在移動(dòng)端寫出來總是不盡人意。在開發(fā)過程中也看到了很多其他大型網(wǎng)站用的該部分的js，發(fā)現(xiàn)太過于累贅了。然后就想到了開源類庫(kù)了，咱們熱愛開源，所以很多時(shí)候都來折騰點(diǎn)開源的東西。不像某些長(zhǎng)沙網(wǎng)絡(luò)公司之間復(fù)制一段js貼上去就完事了。后來我們發(fā)現(xiàn)了一款名為swipe.js的輕量級(jí)開源類庫(kù)，大小只有8KB。

雖然是一個(gè)極其輕量級(jí)的類庫(kù)，但它的功能卻不簡(jiǎn)單，它可以用來展示web頁(yè)面上的任何內(nèi)容，支持精確的觸摸移動(dòng)操作，而且還可以設(shè)置自動(dòng)播放、等比例縮放等等實(shí)用性的功能。

幾個(gè)關(guān)于swipe.js的使用參數(shù)

startSlide: 4, //起始圖片切換的索引位置
auto: 3000, //設(shè)置自動(dòng)切換時(shí)間，單位毫秒
continuous: true, //無限循環(huán)的圖片切換效果
disableScroll: true, //阻止由于觸摸而滾動(dòng)屏幕
stopPropagation: false, //停止滑動(dòng)事件
callback: function(index, element) {}, //回調(diào)函數(shù)，切換時(shí)觸發(fā)
transitionEnd: function(index, element) {} //回調(diào)函數(shù)，切換結(jié)束調(diào)用該函數(shù)。

除此之外還有我們經(jīng)常需要調(diào)用的API

prev()：上一頁(yè)
next()：下一頁(yè)
getPos()：獲取當(dāng)前頁(yè)的索引
getNumSlides()：獲取所有項(xiàng)的個(gè)數(shù)
slide(index, duration)：滑動(dòng)方法

更多的細(xì)節(jié)大家可以去它的官網(wǎng)或者github去參考，也可以到時(shí)候參考我們的手機(jī)版官網(wǎng)哦。

swipe.js官網(wǎng)地址：http://swipejs.com/

swipe.js在github的項(xiàng)目主頁(yè)：https://github.com/thebird/Swipe