怎么设置图片自动轮播
<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>