实现无缝轮播的简单实例

/**
* 图片轮播过程分析
* 假设一共有5张图片，克隆第一张图片放在最后，现在一共有6张图。
* 轮播中图片显示的顺序为：
* 1 2 3 4 5 (6–>1) 2 3 4 5 (6–>1) ….
* (6—>1)表示图片显示第6张图片(克隆自第一张图片)后，迅速的将图片容器滚动到开始的位置,即第一张图片
* 这也是无缝轮播的秘密所在，由于切换为同一张图片，且切换的时间很小，所以人眼看不出来。
* 图片对应锚点的顺序为：
* 0 1 2 3 4 0 1 2 3 4 0
* 图片显示时容器的位置:
* 0 -100% -200% -300% -400% (-500%–>0) -100% -200% -300% -400% (-500%–>0)
*/
html结构：

<section class="swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide" data-swiper-slide-index="0"><a href="javascript: void(0);"><img src="http://img.cdn.aplum.com/o_1cfmds2oh5lgb471tkf17u913l6e.jpg" alt="slide image"></a></li>
                <li class="swiper-slide" data-swiper-slide-index="1"><a href="javascript: void(0);"><img src="http://img.cdn.aplum.com/o_1cj2ker7j1isf1p8s1rsvign1jaff.jpg" alt="slide image"></a></li>
                <li class="swiper-slide" data-swiper-slide-index="2"><a href="javascript: void(0);"><img src="http://img.cdn.aplum.com/o_1chuinfct1ak81u9k1edd1qrurkrf.jpg" alt="slide image"></a></li>
                <li class="swiper-slide" data-swiper-slide-index="3"><a href="javascript: void(0);"><img src="http://img.cdn.aplum.com/o_1chd60gf5sp81v2lkms1838lllf.png" alt="slide image"></a></li>
                <li class="swiper-slide" data-swiper-slide-index="4"><a href="javascript: void(0);"><img src="http://img.cdn.aplum.com/o_1cfmds2oh826nfspjh1a1ml1b.jpg" alt="slide image"></a></li>
            </ul>
            <ul class="swiper-pagination">
                <li class="swiper-pagination-customs active"></