Javascript教程_解决为什么这里的i总是4源码教程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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" "">
<html xmlns="">
<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>
相关文章
精彩导读
热门资讯
关注我们
