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，下载后解压即可看到。

六、效果图实例如下：