猿问

淘宝宝贝图片展示，鼠标放上去只有最后一个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>


图像789
浏览 1329回答 2
2回答

OlderSkee

<!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>在我这里跑是没有问题的
0

OlderSkee

因为你这样 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>就够了。
4
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答