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