推薦一款手機端的圖片滑動插件iSlider


首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html

這是demo

眾所周知,移動端的圖片滑動插件有很多,為什么我要推薦這個iSlider呢?

這個插件吸引我的有兩點,

一是它不依賴與jquery,采用原生代碼書寫。二是它使用起來非常容易,而且除了圖片,還支持普通的dom元素,滑動方式多樣,效果豐富。

但是它也有些缺點,其一就是它提供的接口太少了。

在為輪播圖片提供一些功能按鈕時,比如說,上一張、下一張、自動播放等。使用這個插件就有些力不從心了,它本身所提供的按鈕相當的死板,如果你用過,你一定會同意我說的。但是在我不死心看了它的源碼后,突然有了一種山重水復疑無路,柳暗花明又一村的感覺。

我發現,源碼中的iSlider對象的原型中,提供了很多的方法,這些方法可以實現我上述提到的一些功能。

我在這里詳細的說明一下。首先,圖片輪播的功能由iSlider這個對象來提供,在js中,我們只要創建一個iSlider對象的實例,並且將一些參數傳遞給它,就可以實現輪播功能。

獲取到這個實例后,假設這個實例為islider,通過islider.slideIndex可以知道當前圖片的序號,這個值可以作為參數。

實例中有一個方法,slideTo。這個方法接受一個數值,可以滑動到對應的序號的圖片。圖片的總數可以由傳給iSlider的圖片信息這個參數來獲得。這個參數是一個數組。

這樣完全可以在自定義按鈕中實現一些功能。

另外,原型中還提供了pause、play等方法,通過這些方法,可以實現很多的功能。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM