首頁(yè) 猿問(wèn) 淘寶寶貝圖片展示，鼠標(biāo)放上去只有最...

淘寶寶貝圖片展示，鼠標(biāo)放上去只有最后一個(gè)li有效果。

JavaScript

圖像789 2016-09-14 18:17:54

<!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>無(wú)標(biāo)題文檔</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貢獻(xiàn)123條經(jīng)驗(yàn) 獲得超103個(gè)贊

<!DOCTYPE html>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ?<title>無(wú)標(biāo)題文檔</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>

在我這里跑是沒(méi)有問(wèn)題的

反對(duì) 回復(fù) 2016-09-14

OlderSkee

TA貢獻(xiàn)123條經(jīng)驗(yàn) 獲得超103個(gè)贊

因?yàn)槟氵@樣 for執(zhí)行了之后i永遠(yuǎn)是 5 ，所以只會(huì)顯示 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聲明最好不要用嚴(yán)格模式了，這樣很難調(diào)試

直接

<!DOCTYPE html>
<html>

就夠了。

2 反對(duì) 回復(fù) 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>

回復(fù) 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>

回復(fù) 2016-09-14
圖像789
還是不對(duì)呀

回復(fù) 2016-09-14