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程序设计有所帮助。