一、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，下载后解压即可看到。
六、效果图实例如下：
swipe.js实现支持手拔与自动切换的图片轮播
原文地址：https://www.cnblogs.com/phperlinxinlan/p/10268338.html