中断する方法/コンテンツスライダーのための無限ループjQueryの機能を一時停止？

Question

私はjqueryのフェードアウトを使用して、リストの要素の集合を巡回していますページを持っている（）&フェードイン（）。私は今それをしたいと思い除い

すべてが、正常に動作します：

• ユーザー回転中のLiを表し、別の要素をクリックすることができます。
• 彼らは要素をクリックすると、現在のアニメーションサイクルが対応するコンテンツLiは
• アニメーション履歴書をロードされている
• 、停止しています。

私は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）のすべてをクリアcooresponding選択リスト要素
• にコンテンツリスト要素の選択は、最終的に、再度アニメーションをキックオフ。

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