остановить цикл в 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>

Но как я могу установить петлю на ложь? У меня есть 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

вы могли бы сделать это добавить условие перед этой строкой:

quotes.eq(quoteIndex % quotes.length) 

добавить следующее:

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

Это должно сделать трюк.

Редактировать: извините !! забыл последнюю часть цитаты.

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

Если вы хотите, чтобы показать пять кавычки подряд, вы можете попробовать это.

(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>