用js實現輪播圖

時間 2019-12-07

原文原文鏈接

昨天一個朋友讓我用js幫他作一個簡單的輪播圖，我自己就是菜鳥一個，js學得不怎麼樣，加上很久沒敲代碼，簡直一頭霧水，還好搞了將近一個小時終於搞定。今天有時間記錄一下，分享給須要的朋友。javascript

實現思路：輪播圖其實就是一個定時器，因此咱們只須要定時改變當前位置的圖片便可。根據這一點實現起來就很簡單了，下面直接上代碼。html

 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>