用js实现轮播图
2021-06-15 06:05
标签：red lock nal 定时 one display var com length 昨天一个朋友让我用js帮他做一个简单的轮播图，我本身就是菜鸟一个，js学得不怎么样，加上好久没敲代码，简直一头雾水，还好搞了将近一个小时终于搞定。今天有时间记录一下，分享给需要的朋友。 实现思路：轮播图其实就是一个定时器，所以我们只需要定时改变当前位置的图片即可。根据这一点实现起来就很简单了，下面直接上代码。 效果如下： 用js实现轮播图 标签：red lock nal 定时 one display var com length 原文地址：http://www.cnblogs.com/pcmcnblogs/p/7276956.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>
上一篇：分享一个PHP文件上传类