要使用到一個庫--swipe.js，專門用來制作能夠用手指滑動的移動端焦點輪播圖的。
需要在網上下載swipe.js包，下載鏈接：https://codeload.github.com/thebird/Swipe/zip/2.0.0，下載后解壓，文件夾名字為：swipe-master.
輪播圖每隔1s會自動輪播，不過，當用戶用手指左右滑動輪播圖之后，輪播圖就會停止自動播放。不過，現在問題已經解決了，只要修改swipe.js文件里的stop()方法函數就可以了。
//swipe.js原先的stop()方法函數，缺點：當用戶用手勢控制左右滑動或者點擊之后，輪播圖就不會自動滾動了
//function stop() {
//
// delay = 0;
// clearTimeout(interval);
//
//}
//修改之后的stop()方法函數可以一直滾動
function stop(){
//delay=0;
delay=options.auto > 0 ? options.auto : 0;
clearTimeout(interval);
}
(1)添加視口約束：
（2）引入js包
（3）注意事項：
// 布局， 在body標簽里面，添加一個父盒子，這個父盒子可以任意取id（eg:<div id="jiaodiantu">）。里面必須內嵌一個class為swipe-wrap 的 div.
（4）<script>關鍵代碼：
callback: function(index, element) {}
//這是回調函數，意思是每做一次輪播，就執行一次什么事情
//我們知道了index就是當前所在的圖片的序號，序號從0開始。
//要讓index指示的那個li加上cur類，同時還要讓其他的li去掉cur類。
$(".xiaoyuandian li").eq(index).addClass("cur").siblings().removeClass("cur");
//讓一個元素自己變成一個樣式，其余的元素去掉樣式，就是一個排他操作。
語法：***.addClass("cur").siblings().removeClass("cur");
//siblings 就是兄弟的意思。
//實現鼠標點擊焦點圖上的小圓點時可以切換到相對應的圖片
全部代碼：
1 <!doctype html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <title>Document</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" id="viewport"> 7 8 <style> 9 #jiaodiantu{ 10 overflow:hidden; 11 visibility:hidden; 12 position:relative; 13 } 14 .swipe-wrap{ 15 overflow:hidden; 16 position:relative; 17 } 18 .swipe-wrap > div{ 19 float:left; 20 width:100%; 21 position:relative; 22 } 23 .swipe-wrap img{ 24 width:100%; 25 } 26 .xiaoyuandian{ 27 list-style:none; 28 position:absolute; 29 bottom:10px; 30 right:10px; 31 width:200px; 32 height:40px; 33 } 34 .xiaoyuandian li{ 35 width:20px; 36 height:20px; 37 background:red; 38 float:left; 39 margin-right:10px; 40 border-radius:10px; 41 } 42 .xiaoyuandian li.cur{ 43 background:blue; 44 } 45 </style> 46 </head> 47 <body> 48 <div id="jiaodiantu"> 49 <div class='swipe-wrap'> 50 <div><img src="images/0.jpg"/></div> 51 <div><img src="images/1.jpg"/></div> 52 <div><img src="images/2.jpg"/></div> 53 <div><img src="images/3.jpg"/></div> 54 <div><img src="images/4.jpg"/></div> 55 </div> 56 <ul class="xiaoyuandian"> 57 <li class="cur"></li> 58 <li></li> 59 <li></li> 60 <li></li> 61 <li></li> 62 </ul> 63 </div> 64 65 <script src="jquery-1.8.3.min.js"></script> 66 <script src='swipe.js'></script> 67 <script> 68 var elem = document.getElementById('jiaodiantu'); 69 window.mySwipe = Swipe(elem, { 70 //1s一次輪播 71 auto: 1000, 72 callback: function(index, element) { 73 $(".xiaoyuandian li").eq(index).addClass("cur").siblings().removeClass("cur"); 74 } 75 }); 76 77 $(".xiaoyuandian li").click( 78 function() 79 { 80 mySwipe.slide($(this).index()); 81 } 82 83 ); 84 85 </script> 86 </body> 87 </html>
運行效果圖：
