<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title></title>
<script>
window.onload=function() {
var img=document.getElementById("img").children;
var lis=document.getElementById(‘ul‘).getElementsByTagName("li"); //这里是获取需要执行动态效果的demo
var iNow;
function move(){ //这里是实现切换的函数
for(i=0;i<img.length;i++){ // 必须通过for循环来获取图片的index，这样才可以获取点击事件传来的index
img[i].style.display=‘none‘;
}
img[iNow].style.display=‘block‘;
}
for (i=0;i<lis.length;i++){ //这里必须通过for循环来获取点击li的时候的index，
lis[i].index=i;
lis[i].onclick=function (){
iNow=this.index; //点击的时候传递index
move(); //运行实现切换效果的函数
}
}
}
</script>
</head>
<body>
<div class="box">
<div id="img">
<img src="images/00031a.jpg" style="display: block;">
<img src="images/00032a.jpg" style="display: none;">
<img src="images/00033a.jpg" style="display: none">
</div>
<ul id="ul">
<li class="list1">1</li>
<li class="list2">2</li>
<li class="list3">3</li>
</ul>
</div>
</body>
</html>