我對 swipe.js 插件的理解

swipe.js是不依靠第三方插件，一個輕量級實現無縫輪播圖的插件，固然，對於第一次使用的我，是徹底蒙圈的，因此在此跟各位分析一下個人使用和理解。

（1）首先，引入js文件

<script src='swipe.js'></script>

（2）按插件要求在html文件中寫好結構，基礎結構以下，以及基本css樣式
注意：行內樣式的max-width屬性值能夠根據本身的須要修改。若是須要角標按鈕等樣式，也能夠按須要直接添加，添加後本身添加css樣式便可

<style>
        .swipe {overflow: hidden;visibility: hidden;position: relative;}
        .swipe .swipe-wrap {overflow: hidden;position: relative;}
        .swipe .swipe-wrap > div { float: left; width: 100%; position: relative;}
        .swipe .swipe-wrap > div img {width: 100%;}
</style>
<div id='mySwipe' style='max-width:400px;margin:0 auto' class='swipe'>
      <div class='swipe-wrap'>
        <div><img src="img/01.jpg" alt=""></div>
        <div><img src="img/02.jpg" alt=""></div>
        <div><img src="img/03.jpg" alt=""></div>
        <div><img src="img/04.jpg" alt=""></div>
      </div>
</div>

（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)：滑動方法