移动端能用手指滑动的焦点轮播图

要使用到一个库--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>

运行效果图：