移動端實現焦點圖
阿新 • • 發佈：2018-01-30
scale 內容 點擊 ice com lba fun maximum 代碼
需要下載的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>
移動端實現焦點圖