document操作例题3
Posted w944372441
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了document操作例题3相关的知识，希望对你有一定的参考价值。
五.大图轮播 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:auto } #datu{ width:800px; height:500px; } .tu{ display:none; } #yuandian{ width:800px; height:80px; position:relative; margin-top:-80px; } .dian{ width:100px; height:50px; float:left; background-color:#F00; margin-left:50px; } </style> </head> <body> <div id="datu"> <img class="tu" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" style="display:block" width="800" height="500"/> <img class="tu" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="800" height="500"/> <img class="tu" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="800" height="500"/> <img class="tu" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="800" height="500"/> <img class="tu" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="800" height="500"/> </div> <div id="yuandian"> <div class="dian" onmouseover="xuan(\'0\')" style="background-image:url(44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg); background-size:100% 100%; width:120px; height:70px; margin-left:40px"></div> <div class="dian" onmouseover="xuan(\'1\')" style="background-image:url(9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg); background-size:100% 100%"></div> <div class="dian" onmouseover="xuan(\'2\')" style="background-image:url(77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg); background-size:100% 100%"></div> <div class="dian" onmouseover="xuan(\'3\')" style="background-image:url(2184009b-c1d9-4376-8ac9-e396016efc56.jpg); background-size:100% 100%"></div> <div class="dian" onmouseover="xuan(\'4\')" style="background-image:url(32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg); background-size:100% 100%"></div> </div> </body> <script type="text/javascript"> window.setInterval("bian()",3000) //设置每隔3000毫秒执行一次该函数 var xu=0 //定义一个变量xu，值为0 这理解为第一张图 function bian() { var x=document.getElementsByClassName("tu") //找到大图元素数组并定义为变量x xu++; //变量xu值+1 if(xu==x.length) //当xu值为大图数组长度时，让其为0。这理解为当走到第6张图时让其从第一张图开始走 { xu=0 } for(var i=0;i<x.length;i++) //遍历x 使该数组所有元素样式隐藏，所有图片隐藏 { x[i].style.display="none" } x[xu].style.display="block"; //让第二张图显示 var y=document.getElementsByClassName("dian") //找到小图数组素并定义变量y for(var i=0;i<y.length;i++) //让小图样式全部恢复默认 { y[i].style.width="100px"; y[i].style.height="50px"; y[i].style.marginLeft="50px"; } y[xu].style.width="120px"; //让第二张小图样式改变 y[xu].style.height="70px"; y[xu].style.marginLeft="40px" } function xuan(a) //手动换图 思路：移到该小图时让其他大图片隐藏，显示该序号大图片。同时让该小图样式改变，其他恢复默认。 { xu=a //将实参赋值给轮播序号，让它从该序号开始轮播 var tu=document.getElementsByClassName("tu") //找到大图元素数组并定义变量tu for(var i=0;i<tu.length;i++) { tu[i].style.display="none" //让大图全部隐藏 } tu[a].style.display="block"; //接收实参使该序号大图元素显示 var dian=document.getElementsByClassName("dian") //找到小图元素数组并定义变量dian for(var i=0;i<dian.length;i++) { dian[i].style.width="100px"; //让小图全部恢复默认 dian[i].style.height="50px"; dian[i].style.marginLeft="50px" } dian[a].style.width="120px"; //接收实参使该序号小图样式改变 dian[a].style.height="70px"; dian[a].style.marginLeft="40px" } </script> </html>
以上是关于document操作例题3的主要内容，如果未能解决你的问题，请参考以下文章