淘宝宝贝图片展示，鼠标放上去只有最后一个li有效果。

<!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=utf-8" /><title>无标题文档</title></head><style>*{ margin:0; padding:0;}ul{ list-style:none;}#box { height:70px; width:360px; padding-top:360px; border:1px solid #ccc; background: url(images/01big.jpg) no-repeat; overflow:hidden; margin:100px auto; }#box ul{ overflow:hidden; border-top:1px solid #ccc; }#box li{ float:left; }</style><script>window.onload = function(){ var box = document.getElementById('box'); function fn(bg){ var lis = box.getElementsByTagName('li'); for( var i = 0; i<lis.length; i++){ lis[i].onmouseover = function(){ box.style.backgroundImage = bg; } } } fn('url(images/01big.jpg)'); fn('url(images/02big.jpg)'); fn('url(images/03big.jpg)'); fn('url(images/04big.jpg)'); fn('url(images/05big.jpg)'); }</script><body><div id="box"><ul> <li><img src="images/01.jpg" alt="" /></li> <li><img src="images/02.jpg" alt="" /></li> <li><img src="images/03.jpg" alt="" /></li> <li><img src="images/04.jpg" alt="" /></li> <li><img src="images/05.jpg" alt="" /></li></ul></div></body></html>

查看完整描述

2 回答

已采纳

OlderSkee

TA贡献123条经验获得超103个赞

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
#box {
height:70px;
width:360px;
padding-top:360px;
border:1px solid #ccc;
background: url(images/01big.jpg) no-repeat;
overflow:hidden;
margin:100px auto;
}
#box ul{
overflow:hidden;
border-top:1px solid #ccc;
}
#box li{
float:left;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById('box');
var lis = box.getElementsByTagName("li");

for (var i=0;i<lis.length;i++){
lis[i].index = i
lis[i].onmouseover = function () {
box.style.backgroundImage = 'url(images/0'+( this.index +1 )+'big.jpg)'
}
}
}
</script>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg" alt="" /></li>
<li><img src="images/02.jpg" alt="" /></li>
<li><img src="images/03.jpg" alt="" /></li>
<li><img src="images/04.jpg" alt="" /></li>
<li><img src="images/05.jpg" alt="" /></li>

</ul>
</div>
</body>
</html>

在我这里跑是没有问题的

反对回复 2016-09-14

OlderSkee

TA贡献123条经验获得超103个赞

因为你这样 for执行了之后i永远是 5 ，所以只会显示 5。

var box = document.getElementById('box');
var lis = box.getElementsByTagName("li");

for (var i=0;i<lis.length;i++){
lis[i].index = i
lis[i].onmouseover = function () {
box.style.backgroundImage = 'url(images/0'+( this.index +1 )+'big.jpg)'
}
}

这样就可以了。

还有，你的doctype声明最好不要用严格模式了，这样很难调试

直接

<!DOCTYPE html>
<html>

就够了。

2 反对回复 2016-09-14

图像789
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin:0; padding:0;} ul{ list-style:none;} #box { height:70px; width:360px; padding-top:360px; border:1px solid #ccc; background: url(images/01big.jpg) no-repeat; overflow:hidden; margin:100px auto; } #box ul{ overflow:hidden; border-top:1px solid #ccc; } #box li{ float:left; } </style>

回复 2016-09-14
图像789
<script> window.onload = function(){ var box = document.getElementById('box'); var lis = box.getElementsByTagName('li'); for( var i = 0; i<lis.length; i++){ lis[i].index = i; lis[i].onmouseover = function(){ box.style.backgroundImage = 'url(images/0"+(this.index+1)+"big.jpg)'; } } } </script> <body> <div id="box"> <ul> <li><img src="images/01.jpg" alt="" /></li> <li><img src="images/02.jpg" alt="" /></li> <li><img src="images/03.jpg" alt="" /></li> <li><img src="images/04.jpg" alt="" /></li> <li><img src="images/05.jpg" alt="" /></li> </ul> </div> </body> </html>

回复 2016-09-14
图像789
还是不对呀

回复 2016-09-14

点击展开后面1条

热搜

最近搜索清空

淘宝宝贝图片展示，鼠标放上去只有最后一个li有效果。

淘宝宝贝图片展示，鼠标放上去只有最后一个li有效果。

2 回答

添加回答