1.子菜单下拉
<!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; } #caidanwai{ 800px; height:40px; margin-top:100px; } #meau{ 404px; height:40px; border:1px solid #99F; } .list{ float:left; 100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border-right:1px solid #99F; } .erji{ 0px; height:0px; float:left; } .erjiwai{ 100px; height:120px; border:1px solid #99F; position:relative; top:41px; left:-102px; display:none; } .leixing{ 100px; height:39px; text-align:center; line-height:40px; vertical-align:middle; border-bottom:1px solid #99F; } </style> </head> <body> <div id="caidanwai"> <div id="meau"> <div class="list" onmouseover="show('chanpin')" onmouseout="hide('chanpin')" >产品中心</div> <div class="erji"> <div class="erjiwai" id="chanpin" onmouseover="xuanzhong(this)" onmouseout="yinc(this)"> <div class="leixing">食品</div> <div class="leixing">家电</div> <div class="leixing">手机</div> </div> </div> <div class="list" onmouseover="show('xinwen')" onmouseout="hide('xinwen')">新闻中心</div> <div class="erji"> <div class="erjiwai" id="xinwen" onmouseover="xuanzhong(this)" onmouseout="yinc(this)"> <div class="leixing">体育</div> <div class="leixing">娱乐</div> <div class="leixing">军事</div> </div> </div> <div class="list">联系我们</div> <div class="list">关于我们</div> </div> </div> </body> <script type="text/javascript"> function show(id){//点击显示下拉菜单 var a=document.getElementById(id); a.style.display="block"; } function hide(id){//鼠标离开下来菜单隐藏 var a=document.getElementById(id); a.style.display="none"; } function xuanzhong(a){ a.style.display="block"; } function yinc(a){ a.style.display="none"; } </script> </html>
我的问题有：再打代码时打错单词导致实现不了，还有就是，onmouseover，onmousemove用法有些不熟悉
2.图片轮播
<!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; } #wai{ 1000px; height:500px; } </style> </head> <body> <div id="wai" > <img class="img" src="try/t0184016d6010089f01.jpg" width="1000" height="500" /> <img class="img" src="try/t01ec98d422ed9fab4a.jpg" width="1000" height="500" style="display:none"/> <img class="img" src="try/t017f330eeb8de34fc2.jpg" width="1000" height="500" style="display:none"/> </div> </body> <script type="text/javascript"> var img=document.getElementsByClassName("img"); var i=0; huan(); function huan(){ xianshi(); if(i>=img.length-1){ i=0; }else{ i++; } window.setTimeout("huan()",2000); } function xianshi(){ for(var a=0;a<img.length;a++){ img[a].style.display="none"; } img[i].style.display="block"; } </script> </html>
问题有：尝试用for循环，使用i代表循环次数和图片索引，没有完成
/*function huan(){
for(i=0;i<img.length-1;i++){
img[i].style.display="block";
if(i>=img.length-1){
i=0
}
}
img[i].style.display="none";
window.setTimeout("huan()",2000);
}*/
3.选项卡效果
<!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; } #xuan{ 400px; height:30px; } .wai{100px; height:30px; margin-top:100px; float:left} .nei{ 800px; height:500px; } </style> </head> <body> <div id="xuan"> <div class="wai" style="background-color:#06F" onclick="dianji('one')"></div> <div class="wai" style="background-color:#0F0" onclick="dianji('two')" ></div> <div class="wai" style="background-color:#C36" onclick="dianji('three')"></div> <div class="wai" style="background-color:#FF0" onclick="dianji('four')"></div> </div> <div style="clear:both"></div> <div class="nei" id="one " style="background-color:#06F"></div> <div class="nei" id="two" style="background-color:#0F0; display:none"></div> <div class="nei" id="three" style="background-color:#C36; display:none"></div> <div class="nei" id="four" style="background-color:#FF0; display:none"></div> </body> <script type="text/javascript"> function dianji(id){ var a=document.getElementsByClassName("nei"); for(i=0;i<a.length;i++){ a[i].style.display="none"; } document.getElementById(id).style.display="block"; } </script> </html>
问题有：当对第一个选项卡点击2次，下面的内容不再显示
4.进度条制作
<!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; } #wai{ 300px; height:30px; border:1px solid #3FF; margin-top:100px; float:left } #nei{ 0%; height:30px; background-color:#F00; float:left } #dj{ margin-top:130px; } </style> </head> <body> <div id="wai"> <div id="nei"></div> </div> <input type="button" value="点击" id="dj" onclick="show()" /> </body> <script type="text/javascript"> var a=0; function show(){ if(a<100){ a++; } document.getElementById("nei").style.width=a+'%'; window.setTimeout("show()",5); } </script> </html>
问题：
document.getElementById("nei").style.width=a+'%';我第一次在"a+'%'"这样写的，实现不了
window.setTimeout("show()",5);对于settimeout（）的使用不大清晰
我想过尝试一下设计一个停止按钮，当你按下进度条停止，而进度条可以一直在走