为什么我的代码中，一旦点击下一张按钮过于频繁（且快）的话，图片切换就会出乱？

源自：5-1 按钮切换
为什么我的代码中，一旦点击下一张按钮过于频繁（且快）的话，图片切换就会出乱？

<!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>无标题文档</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>
提问者：二五七 2015-08-31 16:52
为什么我的代码中，一旦点击下一张 按钮过于频繁（且快）的话，图片切换就会出乱？

个回答

为什么我的代码中，一旦点击下一张按钮过于频繁（且快）的话，图片切换就会出乱？
