请问首页幻灯片这种js写法有什么问题？为什么不成功？谢谢

Question

<script>    window.onload = function(){        var bigBox = document.getElementById('slidebox');        var smallBox = bigBox.getElementsByTagName('div');        var nums = bigBox.getElementsByTagName('li');        var pic = smallBox.getElementsByTagName('img');        var arr = [        "d:/ddy/images/01.jpg",        "d:/ddy/images/02.jpg",        "d:/ddy/images/03.jpg",        "d:/ddy/images/04.jpg",        ];        for(var i=0;i<nums.length;i++){            nums[i].index = i;            nums[i].onmouseover = function(){                for(var i=0;i<nums.length;i++){                    nums[i].className = '';                }                this.className = 'current';                pic.src = arr[this.index];            }        }     }   </script>这是js部分；html贴上吧：<div class = "slidebox" id = "slidebox">    <div class = "slide">        <img src = "d:\ddy\images\01.jpg" />    </div>    <ul class = "btns">        <li class = "current">1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul></div>css额：.slidebox{width: 900px;height: 310px;margin: 0 auto; z-index: 0;position: relative;}.slide{z-index: 1;position: absolute;}.btns{z-index: 9999;bottom: 10px;position: absolute;right: 5px;}.slide img{width: 900px;height: 310px;}.slidebox ul li {width:18px;height: 18px; float: left;margin-right: 5px;text-align: center;background: #666;font: 12px arial;line-height: 18px;text-decoration: none;color: #fff;}.slidebox ul .current{background: #f33;}

Answer 1

不同于getElementById(), getElementsByTagName()返回的不是一个element，而是一个a list of elements，所以应该这样写：

var bigBox = document.getElementById('slidebox');

var smallBox = bigBox.getElementsByTagName('div')[0];

var nums = bigBox.getElementsByTagName('li');

var pic = smallBox.getElementsByTagName('img')[0];