1.swipe.js 專門用來製作手指滑動的焦點輪播圖
使用步驟：
下載swipe.js文件——》新建HTML5頁面——》添加視口約束——》添加兩個div，第一個的id名稱可以任意，第二個固定爲：“swipe-wrap”——》插入放置輪播圖的div,而不是ul(因爲swipe.js庫只支持div)——》添加CSS樣式——》引用JQuery 和swipe.js庫——》。。。
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手機滑動輪播圖</title> <meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,shrink-to-fit=no, user-scalable=no,minimal-ui" name="viewport"> </head> <style type="text/css"> *{ margin:0; padding: 0; list-style: none; } /* Swipe 2 required styles */ #lunbotu { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; } /* END required styles */ .swipe-wrap img{ width: 100%; } .yuandian { right:10px; bottom:10px; position: absolute; /*height: 40px;*/ } .yuandian li{ width: 20px; height: 20px; border-radius: 50%; background: blue; float: left; margin-right: 10px; } .yuandian .cur{ background:red; } </style> <body> <div id="lunbotu"> <div class="swipe-wrap"> <!--此處class的名稱是固定的--> <div><img src="images/daiyu.png" ></div> <div><img src="images/baochai.jpg" ></div> <div><img src="images/xiangyun.png" ></div> <div><img src="images/tanchun.png" ></div> <div><img src="images/wangxifeng.png" ></div> <div><img src="images/liwan.png" ></div> </div> <ul class="yuandian"> <li class="cur"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src='js/swipe.js'></script> <script> // pure JS var elem = document.getElementById('lunbotu'); window.mySwipe = Swipe(elem, { // startSlide: 4, auto: 3000, //每隔3000ms，自動輪播一次 // continuous: true, // disableScroll: true, // stopPropagation: true, // 回調函數表示沒做完一個輪播，就執行下面的內容 callback: function(index, element) { // console.log(index); //在控制檯輸出index的值 // 讓自己的li添加cur類，其他的兄弟li移除cur類，也就是一種排他 $(".yuandian li").eq(index).addClass("cur").siblings().removeClass("cur"); } // transitionEnd: function(index, element) {} }); // 點擊小圓點，圖片會有一個slide的效果 $('.yuandian li').click(function(){ mySwipe.slide($(this).index()); }); // with jQuery // window.mySwipe = $('#mySwipe').Swipe().data('Swipe'); </script> </body> </html>運行效果：
1）自動輪播
2)用手指滑動，也會切換
3）點擊小圓點，也會實現切換
