javascriptのループを停止

Question

私はjavascriptを使いました。私はこのスクリプトを見つけましたhttp://jsfiddle.net/jfriend00/n4mKw/テキストスライドショーのために、私はそれが大好きです！

(function() { 
 
    
 
    var quotes = $(".quotes"); 
 
    var quoteIndex = -1; 
 

 
    function showNextQuote() { 
 
    ++quoteIndex; 
 
    quotes.eq(quoteIndex % quotes.length) 
 
    .fadeIn(2000) 
 
    .delay(2000) 
 
    .fadeOut(2000, showNextQuote); 
 
    } 
 

 
    showNextQuote(); 
 

 
})();

.quotes {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<h2 class="quotes">first quote</h2> 
 
<h2 class="quotes">second quote</h2> 
 
<h2 class="quotes">third quote</h2>

しかし、どのように私はfalseにループを設定することができますか？ 私は5つの引用符を持っており、スライドの後に、私はあなたがこのことによって、この行の前に条件を追加行うことができます

Answer 1

the updated JSFiddleに表情を与えてください：

var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
    ++quoteIndex; 

    var $el = quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(2000) 
     .delay(2000); 

    if ((quoteIndex % quotes.length) < (quotes.length - 1)) { 
     $el.fadeOut(2000, showNextQuote); 
    } 
    } 

    showNextQuote(); 

を何がしなければならないことは声明分割することです：二つの部分で

quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(2000) 
     .delay(2000) 
     .fadeOut(2000, showNextQuote); 

を。要素の中にフェードを制御する最初の部分：

var $el = quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(2000) 
     .delay(2000); 

その要素をフェードアウトするかどうかをチェックする第二部：

if ((quoteIndex % quotes.length) < (quotes.length - 1)) { 
    $el.fadeOut(2000, showNextQuote); 
} 

Answer 2

を固定し、最後の引用符を表示する：

if(quoteIndex == quotes.length - 1) 
{ 
    quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(2000); 
} 

：

quotes.eq(quoteIndex % quotes.length) 

はこれを追加

これはトリックを行う必要があります。

編集：ごめんなさい！最後の引用部分を忘れてしまった。

Answer 3

(function() { 
 

 
var quotes = $(".quotes"); 
 
var quoteIndex = -1; 
 

 
function showNextQuote() { 
 
    ++quoteIndex; 
 
    if(quoteIndex < quotes.length -1) { 
 
    quotes.eq(quoteIndex % quotes.length) 
 
     .fadeIn(2000) 
 
     .delay(2000) 
 
     .fadeOut(2000, showNextQuote); 
 
     
 
    } 
 
    else if(quoteIndex < quotes.length) { 
 
    quotes.eq(quoteIndex % quotes.length).fadeIn(2000); 
 
    } 
 
} 
 

 
showNextQuote(); 
 

 
})();

.quotes {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 class="quotes">first quote</h2> 
 
<h2 class="quotes">second quote</h2> 
 
<h2 class="quotes">3rd quote</h2> 
 
<h2 class="quotes">4th quote</h2> 
 
<h2 class="quotes">5th quote</h2>

Answer 4

あなたが行の5つの引用符を表示したい場合、あなたはこれを試すことができます。

(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 
    var quoteslength = quotes.length; 

    function showNextQuote() { 
     ++quoteIndex; 
     if(quoteIndex < quoteslength){ 
      quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
     } 
    } 
    showNextQuote(); 
})(); 

Answer 5

が最後のものを検出し、への呼び出しを繰り返し停止自身

(function() { 
 
    
 
    var quotes = $(".quotes"); 
 
    var quoteIndex = -1; 
 

 
    function showNextQuote() { 
 
    ++quoteIndex; 
 
    if (quoteIndex == quotes.length - 1) { 
 
     // it is our last one 
 
     quotes.eq(quoteIndex).fadeIn(2000) 
 
     // we won't get invoked any more 
 
    } 
 
    else { 
 
     quotes.eq(quoteIndex) // no longer need for the modulus, since we wont go beyond length 
 
     .fadeIn(2000) 
 
     .delay(2000) 
 
     .fadeOut(2000, showNextQuote); 
 
    } 
 
    } 
 

 
    showNextQuote(); 
 

 
})();

.quotes {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<h2 class="quotes">first quote</h2> 
 
<h2 class="quotes">second quote</h2> 
 
<h2 class="quotes">third quote</h2>