在 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

您可以通过在此行之前添加一个条件来做到这一点：

quotes.eq(quoteIndex % quotes.length)

添加这个：

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

这应该可以解决问题。

编辑：抱歉！！忘了最后引述部分。

Answer 2

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

如果你想连续显示五个引号，你可以试试这个。

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

请看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 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>

在 javascript 中停止循环

stop the loop in javascript

javascript

loops

quotes