求指点代码错误问题。谢谢大神！

<!DOCTYPE html>
<html>
<head>
<title>0</title>
<meta charset="utf-8">
<style type="text/css">
* {margin: 0; padding: 0; }
body {background: url(img/HR8EDU95GC4D.jpg) no-repeat fixed;}
#div1 {position: relative; margin: 100px auto;width: 750px; }
#div1 div {width: 750px; height: 500px;position: absolute;}
img {width: 750px; height: 500px;}
a {display: block; width: 50px; height: 50px; font-size: 30px; line-height: 50px; text-align: center;
    text-decoration: none; background: black; color: #fff; opacity: 0.5; filter: alpha(opacity:50);
    position: absolute; top: 225px;}
#left {left: 20px;}
#right {right: 20px;}
a:hover {opacity: 1; filter: alpha(opacity:100)}
ul {position: absolute; top:520px;left: 50%; margin-left:-105px;}
li {list-style: none; width: 30px; height: 30px; background: #ccc;margin: 10px;
    float: left;cursor: pointer;}
li.active {background: yellow; }
#div1 ul li div {display: none;width: 150px; height: 100px;top: -110px;position: absolute;}
#div1 ul li img {width: 150px; height: 100px; position: absolute; }
</style>
</head>
<body>
<div id="div1">
    <div><img id="showPic" src="img/94bOOOPIC77.jpg" alt="图片正在加载中……"></div>
    <a id="left" href="javascript:;"><</a>
    <a id="right" href="javascript:;">></a>
    <ul id="list">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
var aLi=oDiv.getElementsByTagName('li');
var oList=document.getElementById('list');
var oShow=document.getElementById('showPic');
var arr=[];
var arrImg=['img/94bOOOPIC77.jpg','img/145234_133529062061_2.jpg','img/0691370023.jpg','img/0691370025.jpg','img/thumb.jpg']
var iNow=0;
oShow.src=arrImg[iNow];
for(i=0;i<aLi.length;i++)
{
    aLi[i].innerHTML='<div><img src="'+arrImg[i]+'"></div>';//这段话
    aDiv=aLi[i].getElementsByTagName('div');
    for(j=0;j<aDiv.length;j++)
    {
        arr.push(aDiv[j]);
    }
    //aLi[i].innerHTML='<div><img src="'+arrImg[i]+'"></div>';放在这里就不行，为什么？
    aLi[i].index=i;
    aLi[i].onmouseover=function()
    {
        arr[this.index].style.display='block'
    }
    aLi[i].onmouseout=function()
    {
        arr[this.index].style.display='none'
    }
    aLi[i].onclick=function()
    {
        iNow=this.index;
        changeActive();
        oShow.src=arrImg[iNow];
    }
}

oRight.onclick=function()
{
    iNow++
    if(iNow==5)
    {
        iNow=0;
    }
    oShow.src=arrImg[iNow];
    document.title=iNow;
    changeActive();
}
oLeft.onclick=function()
{
    iNow--
    if(iNow==-1)
    {
        iNow=4;
    }
    oShow.src=arrImg[iNow];
    document.title=iNow;
    changeActive();
}

function changeActive()
{
    for(j=0;j<aLi.length;j++)
    {
        aLi[j].className='';
    }
    aLi[iNow].className='active';
}


</script>
</html>


以上，注释语句换位置就会报错，请问这是为何？

我在chrome下运行，两个位置都可以。

firebug报什么错啊，要不然还得慢慢看。

同上，我再写一遍把：

aLi[i].innerHTML='<div><img src="'+arrImg[i]+'"></div>';//这段话
aDiv=aLi[i].getElementsByTagName('div');
for(j=0;j<aDiv.length;j++)
{
    arr.push(aDiv[j]);
}
 //aLi[i].innerHTML='<div><img src="'+arrImg[i]+'"></div>';放在这里就不行，为什么？

// 这段代码是在 li 标签中增加 div 等一系列的元素
aLi[i].innerHTML='<div><img src="'+arrImg[i]+'"></div>';

// 这段代码是获取当前 li 中的 div 元素
aDiv=aLi[i].getElementsByTagName('div');

这里就可以看出，你切换顺序后，li 标签里面并没有 div 元素，然后上面这段代码就会找不到 div 而报错。

先添加，再访问并使用。

aLi[i].innerHTML='<div><img src="'+arrImg[i]+'"></div>';//这段话
aDiv=aLi[i].getElementsByTagName('div');
for(j=0;j<aDiv.length;j++)
{
arr.push(aDiv[j]);
}
//aLi[i].innerHTML='<div><img src="'+arrImg[i]+'"></div>';放在这里就不行，为什么？

没调试过，大概是aDiv赋值这里div取不到

没有耐心看完，建议调试一下。

【热门文章】