                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點圖輪播特效

為什么我的代碼中，一旦點擊下一張按鈕過于頻繁（且快）的話，圖片切換就會出亂？

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標(biāo)題文檔</title>
<style?type="text/css">
??.{margin:0px;padding:0px;text-decoration:none;}
??body{padding:20px;}
??#container{width:967px;height:330px;position:relative;overflow:hidden;margin:0?auto;border:1px?solid?#333;}
??#pic{width:7736px;height:330px;position:absolute;z-index:1;}
??#pic?img{float:left;}
??#buttons{width;100px;height:10px;position:absolute;bottom:20px;left:433px;z-index:2;}
??#buttons?span{cursor:pointer;float:left;border:1px?solid?#fff;width:10px;height:10px;border-radius:5px;margin:0?4px;}
??#buttons?.on?{background:?orangered;}
??.arrow{cursor:pointer;line-height:60px;text-align:center;display:none;font-size:36px;font-weight:bold;width:30px;height:60px;background-color:RGBA(0,0,0,0.3);color:#fff;z-index:2;position:absolute;top:135px;text-decoration:none;}
??.arrow:hover{background-color:RGBA(0,0,0,0.7);}
??#container:hover?.arrow{display:block;}
??#prev{left:0px;}
??#next{right:0px;}
</style>
<script?type="text/javascript">
???window.onload?=?function(){
	????var?container?=?document.getElementById('container');?
		var?pic?=??document.getElementById('pic');
		var?buttons?=?document.getElementById('buttons').getElementsByTagName('span');
		var?prev?=?document.getElementById('prev');
		var?next?=?document.getElementById('next');
		var?index?=?1;
		var?len?=?6;
		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){
			if(offset?==?0)
			{
				return;
			}
			
			animated?=?true;
			var?time?=?500;
			var?interval?=?10;
			var?speed?=?offset/(time/interval);
			var?newleft?=?parseInt(pic.style.left)+offset;
			function?go()
			{
				if((speed?>?0?&&?parseInt(pic.style.left)?<?newleft)?||?(speed?<?0?&&?parseInt(pic.style.left)?>?newleft))
				{
					pic.style.left?=?parseInt(pic.style.left)?+?speed?+?'px';
					setTimeout(go,interval);
				}
				else
				{
			????????pic.style.left?=?newleft?+'px';
			????????if(newleft?>?-100)
			?????{
				????pic.style.left?=?-5802?+?'px';
			?????}
			????if(newleft?<-967*len)
			?????{
				????pic.style.left?=?-967?+?'px';
			?????}		
				?animated?=?false;			
				}
			}
????????????go();
		}
		
		function?play()
		{
			timer?=?setInterval(function(){next.onclick();play();},interval);
		}
		
		function?stop()
		{
			clearInterval(timer);
		}
		
		next.onclick?=?function(){
			if(index?==?6)
			{
				index?=?1;
			}
			else
			{
				index+=?1;
			}
			animate(-967);
			showbutton();??	
		}
		prev.onclick?=?function(){
			if(index?==?1)
			{
				index?=?6;
			}
			else
			{
				index-=?1;
			}
			animate(967);
			showbutton();
		}
		for(var?i=0;i<buttons.length;i++)
		{
			buttons[i].onclick?=?function()
			{
				if(animated)
				{
					return;
				}
				if(this.className?==?'on')
				{
					return;
				}
			????var?myIndex?=?parseInt(this.getAttribute('index'));
			????var?offset?=?-967*(myIndex?-?index);
				
			????animate(offset);
			????index?=?myIndex;
			????showbutton();
			}
		}
		container.onmouseover?=?stop;
		container.onmouseout?=?play;
		
		play();
???}
</script>
</head>

<body>
<div?id="container">
???<div?id="pic"?style="left:-967px;">
??????<img?src="image/a6.jpg"?alt="6"?/>
??????<img?src="image/a1.jpg"?alt="1"?/>
??????<img?src="image/a2.jpg"?alt="2"?/>
??????<img?src="image/a3.jpg"?alt="3"?/>
??????<img?src="image/a4.jpg"?alt="4"?/>
??????<img?src="image/a5.jpg"?alt="5"?/>
??????<img?src="image/a6.jpg"?alt="6"?/>
??????<img?src="image/a1.jpg"?alt="1"?/>
???</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>
??????<span?index="6"></span>
???</div>
??????<a?href="javascript:;"?class="arrow"?id="prev">&lt;</a>
??????<a?href="javascript:;"?class="arrow"?id="next">&gt;</a>
</div>
</body>
</html>