它是一個(gè)純javascript工具，不需要跟其它js庫(kù)一起導(dǎo)入，同時(shí)兼容jQuery和zepto，壓縮版的大小只有6kb很適合移動(dòng)端的開發(fā)，它的git地址：https://github.com/thebird/swipe

在git上對(duì)其的使用方式介紹的相當(dāng)清楚，關(guān)鍵代碼如下

其中.swipe嵌套.swipe-wrap這個(gè)html樹模型最好不要改動(dòng)，至于最里面的div可以更換其他，如li 等

僅僅只需要上訴的幾段代碼即可完成輪播圖的制作，但是在實(shí)際的項(xiàng)目中，特別是在首頁(yè)頂部的banner上還需要加入page的索引，還需要對(duì)控件的參數(shù)進(jìn)行配置，它的主要參數(shù)配置如下：

startSlide Integer (default:0) - 開始滾動(dòng)的位置

speed Integer (default:300) - 動(dòng)畫滾動(dòng)的間隔（秒數(shù)）

auto Integer - 開始自動(dòng)幻燈片（以毫秒為單位幻燈片之間的時(shí)間）

continuous Boolean (default:true) - 創(chuàng)建一個(gè)無(wú)限的循環(huán)（當(dāng)滑動(dòng)到所有動(dòng)畫結(jié)束時(shí)是否循環(huán)滑動(dòng)）

disableScroll Boolean (default:false) - 當(dāng)滾動(dòng)滾動(dòng)條時(shí)是否停止幻燈片滾動(dòng)

stopPropagation Boolean (default:false) - 是否停止事件冒泡

callback Function - 幻燈片運(yùn)行中的回調(diào)函數(shù)

transitionEnd Function - 動(dòng)畫運(yùn)行結(jié)束的回調(diào)函數(shù)

而他的主要api函數(shù)如下：

prev()：上一頁(yè)

next()：下一頁(yè)

getPos()：獲取當(dāng)前頁(yè)的索引

getNumSlides()：獲取所有項(xiàng)的個(gè)數(shù)

slide(index, duration)：滑動(dòng)方法

以下是偶在項(xiàng)目中的實(shí)際運(yùn)用的代碼

zepto中的swipeUp，swipeDown不起效果

我正在看zepto，然后看到里面一些事件的時(shí)候發(fā)現(xiàn)一個(gè)問題：

在移動(dòng)端swipeUp，swipeDown不起效果，另外幾個(gè)有效，是怎么回事呢？

解決方案一：

zepto要引入 touch.js模塊 官網(wǎng)上是沒有的 去github下載 然后引入 touch.js即可

解決方案二：

是因?yàn)樽柚沽藶g覽器默認(rèn)的下拉事件，加上下面一段代碼。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com