轮播出现空白

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}