標籤：dex -- 移動 min 自己 nbsp func relative tar
需要下載的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>
移動端實現焦點圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
