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++;  
}