老师，请问下面的代码，为啥点击按钮，不能实现切换图片的功能呢？

HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>轮播图片</title>
   <link rel="stylesheet" href="img.css">
</head>
<body>
   <div class="box" id="box">
       <div class="banner" id="banner">
           <div class="slide active"><img src="img/bg1.jpg"/></div>
           <div class="slide"><img src="img/bg2.jpg"/></div>
           <div class="slide"><img src="img/bg3.jpg"/></div>
       </div>
       <a href="" class=" button prev" id="prev"><img src="img/arrow.png"/></a>
       <a href="" class="button next" id="next"><img src="img/arrow.png"/></a>
   </div>
   <script src="img.js"></script>
</body>
</html>

CSS:

*{
   margin:0;
   padding:0;
}
.box{
   width:1200px;
   height:460px;
   margin:30px auto;
   position:relative;
}
.box .banner{
   width:1200px;
   height:460px;
   overflow:hidden;

}
.box .banner .slide{
   display:none;
}
.box .banner .active{
   display:block;
}
.box .button{
   display:block;
   width:45px;
   height:80px;
    position:absolute;
   top:50%;
   left:244px;
   margin-top:-30px;
   text-align:center;
   line-height:100px;
}
.button:hover{
    background:rgba(7,17,27,0.6);
}
.box .prev{
   transform:rotate(180deg);
}
.box .next{
   left:auto;
   right:0px;
}

JS：

// 封装一个取id的函数
function getId(id){
   return typeof(id)?document.getElementById(id):id;
}
// 封装一个滑动图片的函数
function slideImg(){
   var time=null,
    banners=getId('banner').getElementsByTagName('div'),
    index=0,
    banner=getId('banner'),
    prev=getId('prev'),
    next=getId('next');
     // 鼠标滑过banner，图片停止自动切换
     banner.onmouseover=function(){
        clearInterval(time);
     }
     //鼠标滑出banner，图片继续自动切换
     banner.onmouseout=function(){
        slideImg();
     }
   // 定时自动切换图片
   var time=setInterval(function(){
           index++;
           if(index>=banners.length){index=0;}
           changeImg();
   },2000)
   // 给前后的button分别绑定事件
     prev.onclick=function(){
        index--;
        if(index<0){index=2}
        changeImg()
}
     next.onclick=function(){
       index++;
       if(index>2){index=0}
        changeImg()
    }

   // 遍历图片统一先隐藏，再跟进Index找到对应图片添加显示效果
function changeImg(){
   for(var i=0;i<banners.length;i++){
       banners[i].style.display="none";
   }
        banners[index].style.display="block";
}
}
slideImg()