                        课程
                    
                        /前端开发
                        
                            /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。麻烦好人帮我看看