怎么设置图片自动轮播

<div class="banner" id="banner">
    <a href="">
     <div class="banner-slide  slide1 "></div>
    </a>
    <a href="">
     <div class="banner-slide  slide2 "></div>
    </a>
    <a href="">
     <div class="banner-slide  slide3 slide-active"></div>
    </a>
   
</div>
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
   <span class="active"></span>
   <span></span>
   <span></span>
</div>
 
<script type="text/javascript">
function byId(id){
 return typeof(id)==="string"?document.getElementById(id):id;
 
 }
 var index=0,
 timer=null,
 pics=byId("banner").getElementsByTagName("div"),
 dots=byId("dots").getElementsByTagName("span"),
 len=pics.length,
 menu=byId("menu-content"),
 subMenu=byId("sub-menu"),
 
 prev=byId("prev"),
 next=byId("next"),
 innerBox=subMenu.getElementsByClassName("inner-box"),
 menuItems=menu.getElementsByClassName("menu-item");
 
 
 function slideImg(){
  var main=byId("main");
  main.onmouseover=function(){
   
   if(timer) clearInterval(timer);
   
   }
  
   
   
   for(var d=0;d<len;d++){
    
    dots[d].id=d;
    dots[d].onclick=function(){
     
     index=this.id;
     
     changeImg();
     }
  
  }
  
  
  next.onclick=function(){
   index++;
   if(index>=len) index=0;
   changeImg();
   }
  
  prev.onclick=function(){
   index--;
   if(index<0) index=len-1;
   changeImg();
   }
  
  //daohang
  
  for(var m=0;m<menuItems.length;m++){
   
   menuItems[m].setAttribute("data-index",m);
   
   
  
  menuItems[m].onmouseover=function(){
   subMenu.className='sub-menu';
   
   var idx = this.getAttribute("data-index");
   
   for(var j=0;j<innerBox.length;j++){
    
    innerBox[j].style.display='none';
    menuItems[j].style.background='none';
    }
   
   //console.log(idx);
   menuItems[idx].style.background='rgba(0,0,0,0.2)';
   innerBox[idx].style.display='block';
   
   }
  }
  
  menu.onmouseout=function(){
   subMenu.className="sub-menu hide";
  
   }
   
   subMenu.onmouseover=function(){
    this.className="sub-menu";
    
    }
    
    
}
 
 //tupian
 function changeImg(){
  
  for(var i=0;i<len;i++){
   pics[i].style.display="none";
   dots[i].className="";
   }
  
  
  pics[index].style.display="block";
  dots[index].className="active";
  } 
 slideImg(); 
 
</script>