<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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:0px auto; padding:0px; font-family:微软雅黑 } #mune{width:1308px; height:50px; margin-top:100px; background-color:#666 } .aa{ width:130px; height:50px; list-style:none; float:left; margin-left:15px } .bb{ width:130px; height:50px; text-align:center } .cc{ width:1308px; height:150px; background-color:#D2D2D2; opacity:0.5; position:absolute; left:29px } .dd{ width:115px; height:145px; float:left; margin:0px 15px; list-style:none } .dd:hover{ cursor:pointer } .img{ width: 115px; height: 115px; border: 1px solid #ffbe00; float:left } .text{ font-size:14px; color:red; text-align:center; line-height:30px; vertical-align:middle } .text:hover{ color:blue } .ee{ width:115px; height:115px } #datu{ width:1308px; height:600px } .gg{ width:1308px; height:600px } </style> </head> <body> <div id="mune"> <ul style="1308px"> <li class="aa" onmouseover="show('one')" onmouseout="hide('one')"> <h3> <img class="bb" src="../../重要练习题/网页练习/自己制作/img/1t-49f43.png" /> </h3> <div class="cc" id="one" onmouseover="xianshi(this)" onmouseout="yincang(this)" style="display:none"> <ul style="1308px"> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/111.png" /> </div> <div class="text">111</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/44-714df.jpg"/> </div> <div class="text">222</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/06bOOOPIC14_1024.jpg" /> </div> <div class="text">333</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20100301110348-7849a.jpg" /> </div> <div class="text">444</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20111205144149_88361.jpg" /> </div> <div class="text">555</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/201206242153515561.jpg" /> </div> <div class="text">666</div> </li> </ul> </div> </li> <li class="aa" onmouseover="show('two')" onmouseout="hide('two')"> <h3> <img class="bb" src="../../重要练习题/网页练习/自己制作/img/2t.png" /> </h3> <div class="cc" id="two" onmouseover="xianshi(this)" onmouseout="yincang(this)" style="display:none"> <ul style="1308px"> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/111.png" /> </div> <div class="text">111</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/44-714df.jpg"/> </div> <div class="text">222</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/06bOOOPIC14_1024.jpg" /> </div> <div class="text">333</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20100301110348-7849a.jpg" /> </div> <div class="text">444</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20111205144149_88361.jpg" /> </div> <div class="text">555</div> </li> <li class="dd"> <div class="img"> <img class="ee" src="../../重要练习题/网页练习/自己制作/img/201206242153515561.jpg" /> </div> <div class="text">666</div> </li> </ul> </div> </li> </ul> </div> <div id="datu"> <img class="gg" src="../../重要练习题/网页练习/自己制作/img/zhaoshang310x80mmxiugaihoubanben20170213-17f47.jpg" /> <img class="gg" src="../../重要练习题/网页练习/自己制作/img/jiajunwangzhanyushihuwai201606131.jpg" style="display:none" /> <img class="gg" src="../../重要练习题/网页练习/自己制作/img/434350972744829146.jpg" style="display:none" /> </div> </body> <script type="text/javascript"> function show(id){ document.getElementById(id).style.display = "block"; } function hide(id){ document.getElementById(id).style.display = "none"; } function xianshi(id){ document.getElementById(id).style.display = "block"; } function yincang(id){ document.getElementById(id).style.display = "none"; } var sy = document.getElementsByClassName("gg"); var a = 0; zhanshi(); function zhanshi(){ lunzhuan(); if(a<sy.length-1){ a++; }else{ a = 0; } window.setTimeout("zhanshi()",2000); } function lunzhuan(){ for(var i=0;i<sy.length;i++){ sy[i].style.display = "none"; } sy[a].style.display = "block"; } </script> </html>