移动端实现焦点图
需要下载的js是：swipe.js文件，http://www.swiper.com.cn/download/index.html
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <title>Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no"> 8 <style type="text/css"> 9 #lunbotu { 10 overflow: hidden; 11 visibility: hidden; 12 position: relative; 13 } 14 .swipe-wrap { 15 width:100%; 16 overflow: hidden; 17 position: relative; 18 padding: 0; 19 margin: 0; 20 } 21 .swipe-wrap > li { 22 float:left; 23 width:100%; 24 height:23rem; 25 position: relative; 26 list-style: none; 27 } 28 .swipe-wrap img{ 29 width: 100%; 30 height: 100%; 31 } 32 .yuandian{ 33 overflow:hidden; 34 width:58%; 35 margin: 0 auto; 36 margin-top:1rem; 37 } 38 .yuandian li{ 39 float: left; 40 width: 1.2rem; 41 height: 0.1rem; 42 margin: 0 0.2rem; 43 background-color: #999; 44 border-radius: 25px; 45 46 47 } 48 .yuandian .cur{ 49 background-color: #333333; 50 } 51 </style> 52 </head> 53 <body> 54 <div id="lunbotu"> 55 <ul class="swipe-wrap"> <!--此处class的名称是固定的--> 56 <li><img src="images/daiyu.png" ></li> 57 <li><img src="images/baochai.jpg" ></li> 58 <li><img src="imagesngyun.png" ></li> 59 <li><img src="images/tanchun.png" ></li> 60 <li><img src="images/wangxifeng.png" ></li> 61 <li><img src="imageswan.png" ></li> 62 </ul> 63 <ul class="yuandian"> 64 <li class="cur"></li>> 65 <li></li>> 66 <li></li>> 67 <li></li>> 68 <li></li>> 69 <li></li>> 70 </ul> 71 </div> 72 <script type="text/javascript" src="jquery-3.1.1.js"></script> 73 <script type="text/javascript" src="swipe.js"></script> 74 <script type="text/javascript"> 75 var elem = document.getElementById('lunbotu'); 76 window.mySwipe = Swipe(elem, { 77 auto: 3000, //每隔3000ms轮播一次，自动轮播效果（可根据自己的需求删掉某种 模式的轮播） 78 // 回调函数表示每做完一个轮播，就执行下面的内容（回调函数里可以做一些功能） 79 callback: function(index, element) { 80 //console.log(index);在控制台输出index的值 81 // 让自己的li添加cur类，其他的兄弟li移除cur类，也就是一种排他 82 $(".yuandian li").eq(index).addClass("cur").siblings().removeClass("cur"); 83 } 84 }); 85 //点击小圆点切换轮播图效果，图片会有一个slide的效果 86 $('.yuandian li').click(function(){ 87 mySwipe.slide($(this).index()); 88 }); 89 </script> 90 </body> 91 </html>
