轮播图一：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>轮播图显示一</title> </head> <script type="text/javascript"> <!-- var n = 0; function init(){ n++; if(n == 5){ n = 1; } //拿到图片对象 var img = document.getElementById("img"); img.src = n + ".png"; //清空label控件的样式 var label = document.getElementsByTagName("label");//通标签名字拿取 for(var i = 0; i < label.length; i++){ label[i].className = ""; } //设定对应的label控件的样式 document.getElementById("l" + n).className = "one"; setTimeout("init()",1500); } //--> </script> <style type="text/css"> #d{ position:relative; top:-30px; } label{ margin-left:20px; } .one{ 10px; height:10px; border:1px solid black; background-color: red; } </style> <body onload="init()"> <div align="center"> <img src = "1.png" alt="aaa" width="300" height="300" id="img"> <div id="d"> <label id = "l1"> 1 </label> <label id = "l2"> 2 </label> <label id = "l3"> 3 </label> <label id = "l4"> 4 </label> </div> </div> </body> </html>
轮播图二：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>轮播图显示一</title> </head> <script type="text/javascript"> <!-- var n = 0; var t = 0; //定义一个事件变量 boolean flag = false;// function init(){ //设置鼠标点击就暂停属性 //拿到所有的label控件 var labs = document.getElementsByTagName("label"); //给每个label控件注册事件 for(var i = 0; i < labs.length; i++){ labs[i].onmouseover = function(){ //让时间停止 clearTimeout(t); //显示对应的图片,此处不能使用labs[i] // * 1 转换成整型 var b = this.innerText * 1 //拿到img对象 var img = document.getElementById("img"); img.src = b + ".png"; //显示成对应的图片 //清空label控件的样式,清空样式 var label = document.getElementsByTagName("label");//通标签名字拿取 for(var i = 0; i < label.length; i++){ label[i].className = ""; } //同时，让label的样式变成one this.className = "one"; } //再注册一个事件，鼠标离开后继续开始 labs[i].onmouseout = function(){ //隔1秒调用fun() setTimeout("fun()",1000); //改变n的值 n = this.innerText * 1; //离开时设置为false flag = false; } } fun(); } function fun(){//单独创建一个函数 n++; if(n == 5){ n = 1; } //拿到图片对象 var img = document.getElementById("img"); img.src = n + ".png"; //清空label控件的样式,清空样式 var label = document.getElementsByTagName("label");//通标签名字拿取 for(var i = 0; i < label.length; i++){ label[i].className = ""; } //设定对应的label控件的样式 document.getElementById("l" + n).className = "one"; t = setTimeout("fun()",1500); } //--> </script> <style type="text/css"> #d{ position:relative; top:-30px; } label{ margin-left:20px; } .one{ 10px; height:10px; border:1px solid black; background-color: red; } </style> <body onload="init()"> <div align="center"> <img src = "1.png" alt="aaa" width="300" height="300" id="img"> <div id="d"> <label id = "l1"> 1 </label> <label id = "l2"> 2 </label> <label id = "l3"> 3 </label> <label id = "l4"> 4 </label> </div> </div> </body> </html>
DOM：
document object model文档对象模型
通过JavaScript，可以重构整个HTML文档。可以添加、改变或重排页面上的项目。
DOM树：
节点：文档中的每个成分都是一个节点，包括文本也是节点。