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

六、效果图实例如下:

 

相关文章