首页 > 代码库 > 用js实现轮播图

用js实现轮播图

2024-11-15 11:35:01   202人阅读

昨天一个朋友让我用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实现轮播图


联系
我们