swipe.js實現支持手拔與自動切換的圖片輪播

一、Html代碼如下：

<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
  <div class='swipe-wrap'>
    <li style="no-repeat center center; list-style-type: none;"><img src="/1.jpg" /></li>
    <li style="no-repeat center center; list-style-type: none;"><img src="/2.jpg" /></li>
    <li style="no-repeat center center; list-style-type: none;"><img src="/3.jpg" /></li>
  </div>
  <ul class="dot">
        <li class="cur"></li>
        <li></li>       
    <li></li>                         
  </ul>
</div>

二、Css代碼如下：

#mySwipe{ overflow:hidden; visibility:hidden; position:relative;  }
.swipe-wrap{ overflow:hidden; position:relative;  }
.swipe-wrap > li{ float:left; width:100%; position:relative; }
.swipe-wrap img{ width:100%;  }
.dot{ list-style:none; position:absolute; bottom:10px; right:25px; width:200px; height:40px;  }
.dot li{  width:10px; height:10px; background:#9e9e9e; float:left; margin-right:10px; border-radius:10px;  }
.dot li.cur{  background:#ff5a54;  }

三、jQuery代碼如下：

<script>
    var elem = document.getElementById("mySwipe");
    window.mySwipe = Swipe(elem, {
        //1s一次輪播
        auto: 2000,
        continuous: true,
        loop: true,
        autoplayDisableOnInteraction : false,
        callback: function(index, element) {
            $(".dot li").eq(index).addClass("cur").siblings().removeClass("cur");
        }
    });

    $(".dot li").click(
        function()
        {
            mySwipe.slide($(this).index());
        }

    );

</script>

四、引用swipe.js

<script type="text/javascript" src="js/swipe.js" ></script>

五、swipe.js代碼下載地址：

https://codeload.github.com/thebird/Swipe/zip/2.0.0，下載後解壓即可看到。

六、效果圖實例如下：