用js实现轮播图
Posted 渣渣程序猿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js实现轮播图相关的知识，希望对你有一定的参考价值。
昨天一个朋友让我用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实现轮播图的主要内容，如果未能解决你的问题，请参考以下文章