콘텐츠 슬라이더에 대한 무한 루프 Jquery 함수를 인터럽트/일시 중지하는 방법은 무엇입니까?

Question

jquery fadeout() & fadein()을 사용하여 일련의 목록 요소를 순환하는 페이지가 있습니다.

• 사용자를 회전에서 리튬을 나타내는 별도의 요소를 클릭 할 수 있습니다 : 지금 그래서 그것을 확인하고 싶은 제외

  모든 것이 잘 작동합니다.

• 들이 요소를 클릭
는 현재 애니메이션 사이클은 정지
• 해당 콘텐츠가 리
• 애니메이션이 다시로드된다.

jquery 큐를 사용하여이 작업을 수행해야한다고 생각하지만 쉽게 해결할 수있는 솔루션이 있는지 궁금합니다. 여기

내 코드입니다 :

$(document).ready(function() { 

var j = 0; 
var fadetime = 700; 
var delay = 3000; //millisecond delay between cycles 
function cycleThru() { 
    var jmax = $("ul#rotator li").length - 1; 
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000"); 

    $("ul#rotator li:eq(" + j + ")").fadeIn(fadetime).delay(delay); 

    $("ul#rotator li:eq(" + j + ")").fadeOut(fadetime, function() { 
     $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");    
     (j == jmax) ? j = 0 : j++;    
     cycleThru(); 
    }); 

}; 

//Setup the clickers on the pager boxes. 
$("ul#rotator_pager li").click(function() { 

    //Switch to this list element and resume animation cycle. 

}); 


cycleThru(); 

});

해당 HTML -

<ul id="rotator"> 
<li id="first"> 
    <div><!--HTML Goes HERE--></div> 
</li> 
<li> 
    <div><!--HTML Goes HERE--></div> 
</li> 
<li> 
    <div><!--HTML Goes HERE--></div> 
</li> 
</ul> 
<ul id="rotator_pager"> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
</ul> 

Answer 1

그래서 나는 몇 분 동안 그것에서 물러나서 그것을 알아 낸 것입니다. Jquery 대기열을 사용해야하지만 생각만큼 복잡하지는 않습니다. 다른 사용자를위한 해결책은 다음과 같습니다.

$(document).ready(function() { 

var j = 0; 
var fadetime = 700; 
var delay = 3000; //millisecond delay between cycles 
function cycleThru() { 
    var jmax = $("ul#rotator li").length - 1; 
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000"); 

    $("ul#rotator li:eq(" + j + ")") 
     .fadeIn(fadetime) 
     .delay(delay) 
     .fadeOut(fadetime, function() { 
      $("ul#rotator_pager li:eq(" + j + ")").css("background-color", ""); 
      (j == jmax) ? j = 0 : j++; 
      cycleThru(); 
     }); 

}; 

//Setup the clickers on the pager boxes. 
var items = $("ul#rotator_pager li").click(function() { 
    $("ul#rotator li:eq(" + j + ")").clearQueue(); 
    $("ul#rotator li:eq(" + j + ")").stop(); 
    $("ul#rotator li:eq(" + j + ")").hide(); 
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", ""); 
    j = items.index(this); 
    cycleThru(); 
    //Switch to this list element and resume animation cycle. 

}); 


cycleThru(); 

}}); 당신이 목록 요소를 클릭하면

기본적으로, 그것은 :

• 는
• 가를 설정,
• 는 현재 표시 내용 목록 요소를 숨 깁니다, 애니메이션 (디큐 및 .stop)의 모든 웁니다 콘텐츠 목록 요소를 해당 선택 목록 요소
• 으로 마지막으로 다시 선택하여 애니메이션을 다시 시작합니다.

Answer 2

는 재귀 함수 호출이 글로벌 부울 변수에 따라 확인 : 당신이 클릭에을 취소 할 수 있습니다

if (!window.end_loop) { 
    cycleThru(); 
} 
... 
$('ul#rotater_pager li').click(function() { 
    window.end_loop = true; 
} 

Answer 3

당신은 VAR로 애니메이션을 설정할 수 있습니다.

$(document).ready(function() { 

var j = 0; 
var fadetime = 700; 
var delay = 3000; //millisecond delay between cycles 
var cycle; 
function cycleThru() { 
    var jmax = $("ul#rotator li").length - 1; 
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000"); 

    $("ul#rotator li:eq(" + j + ")").fadeIn(fadetime).delay(delay); 

    $("ul#rotator li:eq(" + j + ")").fadeOut(fadetime, function() { 
     $("ul#rotator_pager li:eq(" + j + ")").css("background-color", ""); 
     if (j != userj) 
     { j = userj } 
     else { 
      (j == jmax) ? j = 0 : j++; 
      userj = j; 
     } 
     cycle = setTimeout(function(){ 
      cycleThru(); 
      }, 10); 
    }); 

}; 

//Setup the clickers on the pager boxes. 
$("ul#rotator_pager li").click(function() { 

    clearTimeout(cycle); 
    //Switch to this list element and resume animation cycle. 

}); 


cycle = setTimeout(function(){ 
    cycleThru(); 
}, 10); 
});