掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
最近在做我們自己長沙網(wǎng)站建設(shè)官網(wǎng)的手機版,其中在微門戶部分要用到一個幻燈片的地方,其實用js或者js的框架之一jq寫一個pc端的這種效果比較容易的,但在移動端寫出來總是不盡人意。在開發(fā)過程中也看到了很多其他大型網(wǎng)站用的該部分的js,發(fā)現(xiàn)太過于累贅了。然后就想到了開源類庫了,咱們熱愛開源,所以很多時候都來折騰點開源的東西。不像某些長沙網(wǎng)絡(luò)公司之間復(fù)制一段js貼上去就完事了。后來我們發(fā)現(xiàn)了一款名為swipe.js的輕量級開源類庫,大小只有8KB。
雖然是一個極其輕量級的類庫,但它的功能卻不簡單,它可以用來展示web頁面上的任何內(nèi)容,支持精確的觸摸移動操作,而且還可以設(shè)置自動播放、等比例縮放等等實用性的功能。
幾個關(guān)于swipe.js的使用參數(shù)
startSlide: 4, //起始圖片切換的索引位置
auto: 3000, //設(shè)置自動切換時間,單位毫秒
continuous: true, //無限循環(huán)的圖片切換效果
disableScroll: true, //阻止由于觸摸而滾動屏幕
stopPropagation: false, //停止滑動事件
callback: function(index, element) {}, //回調(diào)函數(shù),切換時觸發(fā)
transitionEnd: function(index, element) {} //回調(diào)函數(shù),切換結(jié)束調(diào)用該函數(shù)。
除此之外還有我們經(jīng)常需要調(diào)用的API
prev():上一頁
next():下一頁
getPos():獲取當前頁的索引
getNumSlides():獲取所有項的個數(shù)
slide(index, duration):滑動方法
更多的細節(jié)大家可以去它的官網(wǎng)或者github去參考,也可以到時候參考我們的手機版官網(wǎng)哦。
swipe.js官網(wǎng)地址:http://swipejs.com/
swipe.js在github的項目主頁:https://github.com/thebird/Swipe
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流