无色无味(杨波) 的Web Log(博客)
如何用onmouseover时间触发DIV显示隐藏
请帮我写一段代码，我要一个网站首页幻灯片效果，幻灯片一共四张图片，每次显示一张图片，其它图片隐藏，通过鼠标移动到旁边的四张缩略图上触发幻灯片区域图片的显示与隐藏。（像大旗网首页那样）我用onmouseover代码写了一下，可是只能控制一个层的显示或者一个层的隐藏，怎么写代码让onmouseover事件触发一个图层显示，其他图层隐藏的效果呢？
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!– div{width:250px; height:200px; float:left; font-size:12px; text-align:center} #con_focus_1{background:#69F; } #con_focus_2{background:#F60;display:none;} #con_focus_3{background:#936;display:none;} #con_focus_4{background:#93F;display:none;} #parentDiv_2{border:1px #fff solid; width:200px; height:20px; clear:both; padding:0px 25px; background:#000} #small_1{ width:50px; height:20px; background:#fff; } #small_2{width:50px; height:20px; background:#fff;} #small_3{width:50px; height:20px; background:#fff;} #small_4{width:50px; height:20px; background:#fff;} –> </style> </head> <script type="text/javascript"> var currentImg=1; var timer var pause=false; function changeImg() { var maxImg=4; var interval=2000; var num=1; for(var i=1;i<=maxImg;i++) { if(i==currentImg) { document.getElementById("con_focus_"+i).style.display="block"; document.getElementById("small_"+i).style.background="#f00"; } else { document.getElementById("con_focus_"+i).style.display="none"; document.getElementById("small_"+i).style.background="#fff"; } } if (currentImg>=4) currentImg=1; else currentImg++; if(!pause) timer=setTimeout("changeImg()",interval); else if(timer) clearTimeout(timer); } function stopChange(num) { currentImg=num; pause=true; changeImg(); } function startChange() { pause=false; changeImg(); } </script> <body onload="changeImg()" > <div id="parentDiv_1"> <div id="con_focus_1">11111111111111111</div> <div id="con_focus_2">22222222222222222</div> <div id="con_focus_3">33333333333333333</div> <div id="con_focus_4">44444444444444444</div> </div> <div id="parentDiv_2"> <div id="small_1"><a href="#" onmouseover="stopChange(1)" onmouseout="startChange()">show1</a></div> <div id="small_2"><a href="#" onmouseover="stopChange(2)" onmouseout="startChange()">show2</a></div> <div id="small_3"><a href="#" onmouseover="stopChange(3)" onmouseout="startChange()">show3</a></div> <div id="small_4"><a href="#" onmouseover="stopChange(4)" onmouseout="startChange()">show4</a></div> </div> </body> </html>
Leave a Reply
我自己
