轮播出现空白

Question

<script type="text/javascript">    window.onload = function () {        var carouse = document.getElementById('carouse');        var list    = document.getElementById('list');        var buttons = document.getElementById('buttons').getElementsByTagName('span');        var prev    = document.getElementById('prev');        var next    = document.getElementById('next');        var index   = 1;        function showButton(){            buttons[index - 1].className = 'on';        }        function animate(offset){            var newLeft = parseInt(list.style.left) + offset;            list.style.left = newLeft + 'px';            if(newLeft > -921){                list.style.left = -2763 + 'px';            }            if(newLeft < -2763){                list.style.left = -921 + 'px';            }        }        next.onclick = function(){             index += 1;            showButton();            animate(-921);        }         prev.onclick = function (){            index -= 1;            showButton();            animate(921);         }    }    </script>    <div style="width:930px;height:auto;float:left;">        <div id="carouse" style="width:921px;height:359px;overflow:hidden;position:relative;margin-left:10px;">             <div id="list" style="left:-921px;">                <img src="image/catalog/45.jpg" alt=""/>                <img src="image/catalog/65.jpg" alt=""/>                <img src="image/catalog/545.jpg" alt=""/>                 <img src="image/catalog/45.jpg" alt=""/>                <img src="image/catalog/65.jpg" alt=""/>            </div>            <div id="buttons">                <span index="1" class="on"><img src="image/catalog/circle.png"></span>                <span index="2"><img src="image/catalog/circle.png"></span>                <span index="3"><img src="image/catalog/circle.png"></span>            </div>            <a href="javascript:;" class="arrow" id="prev"><img src="image/catalog/arrow_left.png"></a>            <a href="javascript:;" class="arrow" id="next"><img src="image/catalog/arrow_right.png"></a>        </div>#list{width:2763px;height:359px;position:absolute;z-index:1;}#list img{float:left;}#buttons{position:absolute;height:14px;width:75px;z-index:2;bottom:20px;left:428px}#buttons span{cursor:pointer;float:left;width:14px;height:14px;}#buttons .on{background:orangered;}.arrow{cursor:pointer;display:none;height:43px;line-height:43px;text-align:center;position:absolute;z-index:2;top:158px;background-color:RGBA(0,0,0,.3);}.arrow:hover{background-color:RGBA(0,0,0,.7);}#carouse:hover .arrow{display:block;}#prev{left:20px}#next{right:20px}