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）点击小圆点，也会实现切换
