基於zepto使用swipe.js製做輪播圖demo

　　在移動web開發中，因爲手機界面較小，爲了能展現更多的圖片常常使用輪播圖而且還須要考慮到手機流量的問題，經過請教他人以及百度，我的感受swipe.js比較好用

它是一個純javascript工具，不須要跟其它js庫一塊兒導入，同時兼容jQuery和zepto，壓縮版的大小隻有6kb很適合移動端的開發，它的git地址以下

https://github.com/thebird/swipe

在git上對其的使用方式介紹的至關清楚，關鍵代碼以下

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

window.mySwipe = Swipe(document.getElementById('slider'),opt);

其中.swipe嵌套.swipe-wrap這個html樹模型最好不要改動，至於最裏面的div能夠更換其餘，如li 等

僅僅只須要上訴的幾段代碼便可完成輪播圖的製做，可是在實際的項目中，特別是在首頁頂部的banner上還須要加入page的索引，還須要對控件的參數進行配置，它的主要參數配置以下：

startSlide Integer (default:0) - 開始滾動的位置  

speed Integer (default:300) - 動畫滾動的間隔（秒數）  

auto Integer - 開始自動幻燈片（以毫秒爲單位幻燈片之間的時間）  

continuous Boolean (default:true) - 建立一個無限的循環（當滑動到全部動畫結束時是否循環滑動）  

disableScroll Boolean (default:false) - 當滾動滾動條時是否中止幻燈片滾動  

stopPropagation Boolean (default:false) - 是否中止事件冒泡  

callback Function - 幻燈片運行中的回調函數  

transitionEnd Function - 動畫運行結束的回調函數  

而他的主要api函數以下：

prev()：上一頁  

next()：下一頁  

getPos()：獲取當前頁的索引  

getNumSlides()：獲取全部項的個數  

slide(index, duration)：滑動方法

如下是偶在項目中的實際運用的代碼

<div class="banner">
            <div id="slider" class="swipe">
                <ul class="swipe-wrap">
                    <li>
                        <a href="javascript:void(0)">
                            <img src="img/1.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <img src="img/2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <img src="img/3.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <img src="img/4.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <img src="img/5.jpg">
                        </a>
                    </li>
                </ul>
                <ul class="slide-trigger">
                    <li class="cur"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

.banner {
                width: 100%;
                position: relative;
            }
            .banner .swipe {
                overflow: hidden;
                position: relative;
            }
            .banner .swipe-wrap {
                overflow: hidden;
                position: relative;
                list-style: none;
            }
            .banner .swipe-wrap li {
                float: left;
                position: relative;
            }
            .banner img {
                width: 100%;
                vertical-align: middle;
            }
            .banner .slide-trigger {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                z-index: 10;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -moz-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                list-style: none;
            }
            .banner .slide-trigger li {
                width: 10px;
                height: 10px;
                background: #FFF;
                margin: 5px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                border-radius: 50%;
            }
            .banner .slide-trigger .cur {
                background: #2fc7c9;
            }

var slider = $('#slider');
        slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
        window.mySwipe = new Swipe(document.getElementById('slider'), {
            speed: 400,
            auto: 3000,
            callback: function(index, elem) {
                slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
            }
        });