                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /焦點圖輪播特效

5-1加了按鈕切換的代碼后沒用，而且之前的效果也不起作用了

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>圖片滾動</title>
????<style>
?*{
?margin:?0;
?padding:0;
?text-decoration:?none;
????????}
?body{padding:?20px;}
?#container{
?width:?400px;
?height:?300px;
?border:3px?solid?#333;
?overflow:?hidden;
?position:?relative;
????????}
?#list{
?width:?2800px;
?height:?300px;
?position:?absolute;
?z-index:1;
????????}
?#list?img{
?width:?400px;
?height:?300px;
?float:?left;
????????}
?#buttons{
?position:?absolute;
?height:?10px;
?width:?100px;
?z-index:2;
?bottom:?20px;
?left:180px;
????????}
?#buttons?span{
?cursor:?pointer;
?float:?left;
?border:1px?solid?#fff;
?width:?10px;
?height:?10px;
?border-radius:?50%;
????????}
?#buttons?.on{
?background:?orange;
????????}
????????.arrow{
?cursor:?pointer;
?display:?none;
?line-height:39px;
?text-align:?center;
?font-size:?36px;
?font-weight:?bold;
?width:?40px;
?height:?40px;
?position:?absolute;
?z-index:?2;
?top:?150px;
?background-color:?RGBA(0,?0,?0,?.3);
?color:?#fff;
????????}
????????.arrow:hover{
?background:?rgba(0,0,0,0.7);
????????}
?#container:hover?.arrow{
?display:?block;
????????}
?#prev{
?left:20px;
????????}
?#next{
?right:20px;
????????}
????</style>
????<script>
?window.onload?=?function?()?{
?var?container?=?document.getElementById('container');
?var?list?=?document.getElementById('list');
?var?buttons?=?document.getElementById('buttons').getElementsByTagName('span');
?var?prev?=?document.getElementById('prev');
?var?next?=?document.getElementById('next');
?var?aImg?=?document.getElementsByTagName('img');
?var?index?=?1;

?function?showButton()?{
?for(var?i=0;i<buttons.length;i++){
?if(buttons[i].className=='on'){
?buttons[i].className?=?'';
?break;
????????????????????}
????????????????}
?buttons[index-1].className?=?'on';
????????????}
?function?animate(offset)?{
?var?newLeft?=?parseInt(list.style.left)+offset;

?list.style.left?=?newLeft+'px';

?if(newLeft>-400){
?list.style.left?=?-2000+'px';
????????????????}
?if(newLeft<-2000){
?list.style.left?=?-400+'px';
????????????????}
????????????}
?next.onclick?=?function?()?{
?if(index==5){
?index?=1;
????????????????}else?{
?index+=1;
????????????????}

?animate(-400);
?showButton();
????????????}
?prev.onclick?=function?()?{
?if(index==1){
?index?=5;
????????????????}else?{
?index-=1;
????????????????}
?animate(400);
?showButton();

????????????}
?for(var?i=0;i<buttons.length;i++){
?buttons[i].onclick?=?function?()?{
?if(this.className=='on'){
?return;
????????????????????}
?var?myIndex?=?parseInt(this.getAttribute('index'));
?var?offset?=?-400*(myIndex-index);
?animate(offset);
?index?=?myIndex;
?showButton();
????????????????}
????????????}
????????}
????</script>
</head>
<body>
????<div?id="container">
????????<div?id="list"?style="left:?-400px;">
????????????<img?src="images/5.jpg"?alt="">
????????????<img?src="images/1.jpg"?alt="">
????????????<img?src="images/2.jpg"?alt="">
????????????<img?src="images/3.jpg"?alt="">
????????????<img?src="images/4.jpg"?alt="">
????????????<img?src="images/5.jpg"?alt="">
????????????<img?src="images/1.jpg"?alt="">
????????</div>
????????<div?id="buttons">
????????????<span?class="on"></span>
????????????<span></span>
????????????<span></span>
????????????<span></span>
????????????<span></span>
????????</div>
????????<a?href="javascript:;"?id="prev"?class="arrow">&lt</a>
????????<a?href="javascript:;"?id="next"?class="arrow">&gt</a>
????</div>
</body>
</html>

提示是showButton里的buttons[index-1].className = 'on';這一句undifined。麻煩好人幫我看看