Javascript教程_解决为什么这里的i总是4源码教程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
ul,li{ list-style:none; margin:0px; padding:0px;}
#huge{ width:585px;}
#huge #large{ float:left;width:470px;height:340px;background:#000;}
#huge #small{ float:right;width:110px;}
#huge #small li{width:110px;height:80px;background:#ccc;}
</style>
<script language="javascript">
function cover(){
var oli=document.getElementsByTagName("li");
var olargeimg=document.getElementById("large").getElementsByTagName("img")[0];
for(var i=0;i<4;i++){
oli[i].onmouseover=function(){
//olargeimg.src=i-1+".jpg";
//alert(this.getElementsByTagName("img")[0].src);
alert(i);
}
}
}
</script>
</head>
<body onload="cover()">
<div id="huge">
<div id="large"><img src="0.jpg"></div>
<div id="small">
<ul>
<li><img src="00.jpg"></li>
<li><img src="01.jpg"></li>
<li><img src="02.jpg"></li>
<li><img src="03.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
为什么这里的i总是4
解决方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
ul,li{ list-style:none; margin:0px; padding:0px;}
#huge{ width:585px;}
#huge #large{ float:left;width:470px;height:340px;background:#000;}
#huge #small{ float:right;width:110px;}
#huge #small li{width:110px;height:80px;background:#ccc;}
</style>
<script language="javascript">
function cover(){
var oli=document.getElementsByTagName("li");
var olargeimg=document.getElementById("large").getElementsByTagName("img")[0];
var tmp;
for(var i=0;i<4;i++){
tmp = i;
(function(tmp){
oli[tmp].onmouseover=function(){
//olargeimg.src=tmp-1+".jpg";
//alert(this.getElementsByTagName("img")[0].src);
alert(tmp);
}
})(tmp);
}
}
</script>
</head>
<body onload="cover()">
<div id="huge">
<div id="large"><img src="0.jpg"></div>
<div id="small">
<ul>
<li><img src="00.jpg"></li>
<li><img src="01.jpg"></li>
<li><img src="02.jpg"></li>
<li><img src="03.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
