JS 轮播图

<div id="banner"><div id="container">   <div id="list" style="left:-1380px;">     <img src="images/5.jpg" alt="5.pg"/>     <img src="images/1.jpg" alt="5.pg"/>     <img src="images/2.jpg" alt="5.pg"/>     <img src="images/3.jpg" alt="5.pg"/>     <img src="images/4.jpg" alt="5.pg"/>     <img src="images/5.jpg" alt="5.pg"/>     <img src="images/1.jpg" alt="5.pg"/>   </div><div id="buttons">     <span index="1"class="on"> </span>     <span index="2"></span>     <span index="3"></span>     <span index="4"></span>     <span index="5"></span></div>   <a href="javascript:;" class="arrow" id="prev"><</a>   <a href="javascript:;" class="arrow" id="next">></a> </div></div>

JS

window.onload=function(){var container=document.getElementById('container');var list=document.getElementById('list');var buttons=document.getElementById('buttons').getElementsByTagName('span');var pre=document.getElementById('prev');var next=document.getElementById('next');var index=1;var animated=false;var timer;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){ animated=true; var newleft=parseInt(list.style.left)+offset; var time=300;//位移总时间 var interval=10;//位移间隔时间 var speed=offset/(time/interval);//每一次的位移量  function go() { if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)) { list.style.left=parseInt(list.style.left)+speed+'px'; setTimeout(go,interval); } else {  animated=false;  list.style.left=newleft+'px';          if(newleft>-1380)          {     list.style.left=-6900+'px';           }         if(newleft<-6900)         {     list.style.left=-1380+'px';          }   }  } go();}function play(){timer=setInterval(function(){next.onclick();},5000);}function stop(){clearInterval(timer);} next.onclick=function(){if(index==5){index=1;}else{index+=1;}showButton();if(animated==false){animate(-1380);}}pre.onclick=function(){if(index==1){index=5;}else{ index-=1;}showButton();if(animated==false){   animate(1380);}} 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=-1380*(myIndex-index); index=myIndex;showButton(); if(animated==false) {animate(offset); }} }  container.onmouseover=stop; container.onmouseout=play; play();}//function validate_required(field,alerttxt)//{//with (field)//{//if (value==null||value=="")//  {alert(alerttxt);return false}//else {return true}//}//}////function validate_form(thisform)//{//with (thisform)//{//if (validate_required(email,"Email must be filled out!")==false)//  {email.focus();return false}//}//}

图片大小1380*460px