標籤：red lock nal 定時 one display var com length
昨天一個朋友讓我用js幫他做一個簡單的輪播圖，我本身就是菜鳥一個，js學得不怎麼樣，加上好久沒敲代碼，簡直一頭霧水，還好搞了將近一個小時終於搞定。今天有時間記錄一下，分享給需要的朋友。
實現思路：輪播圖其實就是一個定時器，所以我們只需要定時改變當前位置的圖片即可。根據這一點實現起來就很簡單了，下面直接上代碼。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 5 <title>輪播圖</title> 6 </head> 7 <body onload="dingShi(2000)"> 8 <div style="position:relative;width:320px;height:479px" id="container"> 9 <div style="position:absolute; top:0px; left:0px ;display:block;"><img src="1.jpg" width="320" height="479" /></div>10 <div style="position:absolute; top:0px; left:0px;display:none;"> <img src="2.jpg" width="320" height="479" /></div>11 <div style="position:absolute; top:0px; left:0px;display:none;"><img src="3.jpg" width="320" height="479" /></div>12 <div style="position:absolute; top:0px; left:0px ;display:none;"><img src="4.jpg" width="320" height="479" /></div>13 <div style="position:absolute; top:0px; left:0px;display:none;"> <img src="5.jpg" width="320" height="479" /></div>14 <div style="position:absolute; top:0px; left:0px;display:none;"><img src="6.jpg" width="320" height="479" /></div>15 </div>16 <div id="nav" style="position:absolute;top:460px;left:180px">17 <div style="cursor:pointer; margin-left:3px; float:left;width:20px;height:20px;background-color:green;color:red;text-align:center;">1 </div>18 <div style="cursor:pointer; margin-left:3px; float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">2 </div>19 <div style="cursor:pointer; margin-left:3px; float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">3 </div>20 <div style="cursor:pointer; margin-left:3px; float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">4 </div>21 <div style="cursor:pointer; margin-left:3px; float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">5 </div>22 <div style="cursor:pointer; margin-left:3px; float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">6 </div>23 </div>24 <script type="text/javascript">25 var i = 0;26 var childNode;27 var indexNode;28 function lunBo() {29 var pics = document.getElementById("container").children;//得到所有子節點30 var indexNums = document.getElementById("nav").children;31 var picNum = pics.length;32 if (i >= picNum) {33 i = 0;34 }35 if (i < picNum) {36 childNode = pics[i];37 indexNode = indexNums[i++];38 for (var j=0; j < picNum; j++) {39 if(j != i){40 pics[j].style.display = "none";41 indexNums[j].style.backgroundColor="blue";42 }43 }44 childNode.style.display="block";45 indexNode.style.backgroundColor="green";46 }47 }48 49 function dingShi(time) {50 window.setInterval(lunBo, time);51 }52 </script>53 </body>54 </html>輪播圖
效果如下：
用js實現輪播圖
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
