我對 swipe.js 插件的理解

lastSeries 發布于2019-08-20 12:34 / 3483人閱讀

摘要：是不依靠第三方插件，一個輕量級實現無縫輪播圖的插件，當然，對于第一次使用的我，是完全蒙圈的，所以在此跟各位分析一下我的使用和理解。

swipe.js是不依靠第三方插件，一個輕量級實現無縫輪播圖的插件，當然，對于第一次使用的我，是完全蒙圈的，所以在此跟各位分析一下我的使用和理解。

（1）首先，引入js文件

（2）按插件要求在html文件中寫好結構，基礎結構如下，以及基本css樣式
注意：行內樣式的max-width屬性值可以根據自己的需要修改。如果需要角標按鈕等樣式，也可以按需要直接添加，添加后自己添加css樣式即可

（2）準備工作已經完成，接下來就是自己需要添加的js代碼

var ele = document.getElementById("#mySwipe");
window.mySwipe = Swipe(ele,{ 
    startSlide: 0,/*開始是第幾頁*/ 
    auto: 2000,/*自動播放的時間間隔*/ 
    continuous: true
});

通過查看swipe.js源碼，Swipe函數有兩個參數，第一個是需要控制的輪播圖，第二個元素就是我們傳入的配置項，如果什么也不寫，就會使用默認的配置項；函數Swipe的返回值是一個對象，對象中有多個方法，即mySwipe是個全局對象(因為添加到了window對象上)，同時這個對象還擁有了函數中定義的方法，可以直接通過點語法調用。

此時，輪播圖已經完成。

（3）拓展

需要添加角標的話：通過callback來改變角標樣式（寫在配置項中）

 callback: function(index, element) {
      //把第index個li變亮
      //把全部的變暗
      $("#mySwipe li").css("background-color","red");
     $("#mySwipe li").eq(index).css("background-color","#fff");
}

添加按鈕效果，直接使用點語法調用

$("#right_btn").on("click",function(){
    window.mySwipe.next();
});
$("#left_btn").on("click",function(){
    window.mySwipe.prev();
});

常用API：
prev()：上一頁
next()：下一頁
getPos()：獲取當前頁的索引
getNumSlides()：獲取所有項的個數
slide(index, duration)：滑動方法

GPU云服務器云服務器云計算的理解 cdn的理解對大數據的理解 ajax的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81057.html

移動端h5輪播插件swipe

摘要：在移動端的頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。在移動端的h5頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...

funnyZhang 2019-08-22 13:58 評論0 收藏0
移動端h5輪播插件swipe

摘要：在移動端的頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。在移動端的h5頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...

Juven 2019-08-29 14:16 評論0 收藏0
Swipe 移動端滑動插件使用詳解

摘要：前言最近需要開發一個新的微信活動平臺，手機端主頁需要用到一個幻燈片。簡介是一個輕量級的移動滑動組件，這點從文件大小不難看出。它支持的觸摸移動，阻力以及防滑。單純從移動端來使用，應該滿足基本的需求了。前言最近需要開發一個新的微信活動平臺，手機端主頁需要用到一個幻燈片。因為好一段時間沒有全部手寫移動端頁面了，遂又重新找了一個下有沒有什么好的幻燈片插件，畢竟重復造輪子沒有必要啊。綜合比...

ZHAO_ 2019-08-21 14:35 評論0 收藏0
react高仿掘金移動版，支持服務端渲染

摘要：一個高仿的掘金，大部分是按照掘金的來實現的，個別地方就根據自己想法修修改改，只做了移動端的部分，還做的部分就要花太多時間了，支持服務端渲染等，寫這個項目主要是對近幾個月所學的技術做個實踐，看看有哪里還有不足，以及在實際開發的時候會踩到哪些 react-juejin 一個高仿的掘金，大部分是按照掘金的ui來實現的，個別地方就根據自己想法修修改改，只做了移動端的部分，還做pc的部分就要花太...

longshengwang 2019-08-23 12:39 評論0 收藏0