js动态切换图片的方法
本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:
index.css文件如下:
*{ margin:0px;padding:0px; } body{ width:632px; /*background-color:blue;*/ margin:0auto; } #imgsCom{ background-color:yellow; /*相对定位,为了下层可以使用绝对定位时以本div的原点为原点*/ position:relative; } #ulnav{ list-style-type:none; position:absolute; /*使用以imgsCom为原点来绝对定位到右下角*/ bottom:0px; right:0px; } #ulnavli{ list-style-type:none; float:left; background-color:black; color:white; margin-right:5px; width:20px; height:20px; line-height:20px; text-align:center; cursor:pointer; }
index.html如下:
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>js,css动态切换图片</title> <linkhref="css/index.css"rel="stylesheet"/> <scripttype="text/javascript"> functiongel(id){ returndocument.getElementById(id); } function clearLiBg(){ varmylis=gel("ulnav").childNodes; for(vari=0;i<mylis.length;i++){ if(mylis[i].nodeType==1){ mylis[i].style.backgroundColor="black"; } } } window.onload=function(){ //给三个li都指定一个属性 varlis=gel("ulnav").childNodes; for(vari=0;i<lis.length;i++){ if(lis[i].nodeType==1){ lis[i].onclick=function(){ //更换图片 gel("myimg").setAttribute("src","images/"+this.innerHTML+".png"); //所有LI颜色复原 clearLiBg(); //更换LI背景标签颜色 this.style.backgroundColor="silver"; }; } } }; </script> </head> <body> <divid="imgsCom"style="width:632px;height:412px;"> <imgsrc="images/1.png"id="myimg"style="width:632px;height:412px;"/> <ulid="ulnav"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。