jQuery - 需要帮助停止单击命令的动画

Question

有了你的帮助，我能够得到我想要完美工作的jquery，除了一件事情..当我点击按钮时，动画不会停止。

场景：
我有一个图像，和3个按钮的下方标有 “1”， “2” 和 “3”。 jquery会每4500ms自动实现点击功能，并从1切换到2，然后从2切换到3并连续循环。但问题是，如果我手动点击1,2,3按钮，动画不会停止。

任何想法我怎么能做到这一点？

的jQuery：

var tabs; 
var len; 
var index = 1; 
var robot; 

function automate() { 
    tabs.eq((index%len)).trigger('click'); 
    index++; 
} 

robot = setInterval(automate, 5500); 

jQuery(document).ready(function(){ 
    jQuery(".imgs").hide(); 
jQuery(".img_selection a").click(function(){ 
     stringref = this.href.split('#')[1]; 
     $(".img_selection a[id$=_on]").removeAttr('id'); 
     this.id = this.className + "_on"; 
     jQuery('.imgs').hide(); 
     if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") { 
      jQuery('.imgs#' + stringref).show(); 
     } else 
      jQuery('.imgs#' + stringref).fadeIn(); 
     return false; 
    }); 
    $('.img_selection a').removeAttr('id').eq(0).trigger('click'); 
    tabs = jQuery(".img_selection a"); 
    len = tabs.size(); 
}); 

我尝试添加下面的代码，用了很多本网站的帮助，但无济于事..

CODE：

jQuery(document).ready(function(){ 
    jQuery(".imgs").hide().click(function(){ 
    clearInterval(robot); 
}); 

HTML：

<!-- TOP IMAGE ROTATION --> 
    <div id="upper_image"> 
     <div id="img1" class="imgs"> 
     <p><img src="images/top_image.jpg" width="900" height="250" alt="" border="0" /></p> 
     </div> 
     <div id="img2" class="imgs"> 
     <p><img src="images/top_image2.jpg" width="900" height="250" alt="" border="0" /></p> 
     </div> 
     <div id="img3" class="imgs"> 
     <p><img src="images/top_image3.jpg" width="900" height="250" alt="" border="0" /></p> 
     </div> 
     </div> 
<!--/TOP IMAGE ROTATION --> 
<!-- TOP IMAGE SELECTION --> 
    <ul class="img_selection"> 
      <li><a id="img1_on" class="img1" href="#img1">1</a></li> 
      <li><a class="img2" href="#img2">2</a></li> 
      <li><a class="img3" href="#img3">3</a></li> 
     </ul> 

<!--/TOP IMAGE SELECTION --> 

Answer 1

没有看到HTML我不能成为certian，但它看起来像你将点击事件添加到图像，而不是按钮。

jQuery(document).ready(function(){ 
    jQuery(".img_selection a").click(function(){ 
     clearInterval(robot); 
    }); 

如果这样不起作用，您总是可以创建一个局部变量来暂停动画。

var pause = false; 

jQuery(document).ready(function(){  
    jQuery(".imgs").hide().click(function(){  
     pause = true; 
    }); 

function automate() { 
    if (pause) return; 
    tabs.eq((index%len)).trigger('click');  
    index++;  
}