停止定时器/自动流动时上的任何数字用户点击

Question

我有不同的div之间用下面的代码很好地旋转的滑块：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript"> 
$(document).ready(function(){ 


    function showSlide(integer) { 
     $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 

     $('#button a').click(function(){ 
     var integer = $(this).attr('rel'); 
     $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 

       }); 
      }); 
     setTimeout(function() {showSlide((integer % 5) + 1);}, 5000); 


    } 

    setTimeout(function() { showSlide(2); }, 5000); 


}); 
</script> 

当用户点击任一标签，滑块跳跃到该选项卡，但定时器继续计数并自动在不到5秒内自动继续流动。

我怎么能让用户点击任何标签时计时器停止？

Answer 1

商店超时参考，并明确其用户点击时。

var timeout; 
function showSlide(integer) { 
    $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(); 
    $('#button a').each(function(){ 
    $(this).removeClass('active'); 
     if($(this).hasClass('button'+integer)){ 
      $(this).addClass('active')} 
    }); 

    $('#button a').click(function(){ 
     clearTimeout(timeout); 
     var integer = $(this).attr('rel'); 
     $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
     $('#button a').each(function(){ 
      $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active') 
      } 

     }); 
    }); 
    timeout = setTimeout(function() {showSlide((integer % 5) + 1);}, 5000); 
} 
timeout = setTimeout(function() { showSlide(2); }, 5000); 

Answer 2

当您使用setTimeout时，将它设置为一个变量，以便您稍后可以使用clearTimeout。例如，

var timeout = setTimeout(function() {showSlide((integer % 5) + 1);}, 5000); 
clearTimeout(timeout); 

祝你好运:)