js自定义属性、及this的用法,还有js 里切换图片获取图片地

2018-11-22  本文已影响0人  MCherish

<!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>

注释部分是不要的。

上一篇 下一篇

猜你喜欢

热点阅读