<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
/*width: 200px;
height: 100px;*/
float: left;
margin-right: 20px;
list-style: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
var arr = ['imgs/11.jpg','imgs/12.jpg','imgs/13.jpg','imgs/14.jpg'];
for (var i =0; i < aLi.length; i++) {
aLi[i].num = 0;
aLi[i].onclick = function() {
// this.img src = arr[this.num];
// alert(0);
this.getElementsByTagName("img")[0].src = arr[this.num];
this.num++;
if (this.num === arr.length) {
this.num = 0;
}
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>
<img src="imgs/1.png" width="200px" height="100px">
</li>
<li>
<img src="imgs/2.png" width="200px" height="100px">
</li>
<li>
<img src="imgs/3.png" width="200px" height="100px">
</li>
</ul>
</body>
</html>
注释部分是不要的。
网友评论