解決swiper.js中無縫輪播的問題。

根據公司需求須要對讓輪播無間隙播放,相似這種效果:http://www.16sucai.com/upload...。由於偷懶用的是swiper.js插件編寫的。swiper.js自動輪播的時候都會有自動停頓,各類調研都沒有合適的方法,只有慢慢摸索。經過查看代碼,發現.swiper-wrapper這個類中有個屬性:
transition-timing-function: ease;圖片描述,修改swiper.js中css的源碼,將這個屬性的值改成linear便可實現無縫隙輪播,就是這麼簡單。transition-timing-function: linear圖片描述
Swiper輪播有它的好處:javascript

    1.Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。css

    2.Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果。前端

    3.Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!
    
同時也有不足之處:(使用Swiper輪播插件ajax請求加載圖片時,沒法滑動的問題)java

由於banner圖是動態建立的,在插件開始初始化時,文檔流中沒用圖片,因此沒有建立相應寬度,經過調整js加載順序,問題仍是沒有解決。ajax

最後找到swiper插件 api 有屬性是能夠根據內容變更,自動初始化插件的,添加observer:true後問題解決!api

var mySwiper = new Swiper ('.swiper-container', {
        pagination: '.swiper-pagination',
        autoplay: 5000,
        loop: true,
        observer:true,//修改swiper本身或子元素時,自動初始化swiper
        observeParents:true,//修改swiper的父元素時,自動初始化swiper
 })

Swiper擁有豐富的API接口。(不過關於中文文檔很少,沒找着。)可以讓開發者生成我的獨有的分頁器(pagination),上下滑塊的按鈕架構

以及4個回調函數:1.onTouchStartapp

         2.onTouchMoveide

         3.onTouchEnd函數

         4.onSlideSwitch。

各位前端大俠,滿意的話但願支持下,點個贊,畢竟這是第一篇文章,謝謝!

相關文章
相關標籤/搜索