Javascript 用两组引用文本 silder

Question

我想用 2 组数据创建引号文本滑块。

小提琴链接 -> https://jsfiddle.net/628r3t1h/

(function() {

    var quotes = $(".quotes");

    var quoteIndex = -1;

    function showNextQuote() {

        ++quoteIndex;

        quotes.eq(quoteIndex % quotes.length)

        .fadeIn(1500)

        .delay(1000)

        .fadeOut(1000, showNextQuote);

        

    }

    showNextQuote();

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- set 1 -->

<h1 style="" class="sec1-head">Set 1<br/>

    <span style="" class="quotes sec1-head-quotes">Text 1.1</span>

    <span style="display: none;"  class="quotes sec1-head-quotes">Text 1.2</span>

    <span style="display: none;"  class="quotes sec1-head-quotes">Text 1.3</span>

</h1>

<!-- set 2 -->

<h1 style="" class="sec1-head">Set 2<br/>

    <span style="" class="quotes sec1-head-quotes">Text 2.1</span>

    <span style="display: none;"  class="quotes sec1-head-quotes">Text 2.2</span>

    <span style="display: none;"  class="quotes sec1-head-quotes">Text 2.3</span>

</h1>

这里Set 1应该首先运行，然后Set 2应该是可见的。而且这个循环必须继续下去。

Answer 1

像这样？const sets = $(".set");let set = sets[0], quote = 0;sets.hide();$(sets[0]).fadeIn(1500);function showQuote() {&nbsp; &nbsp; if($(set).children().eq(quote).is(':last-child')) {&nbsp; &nbsp; &nbsp; &nbsp; if($(set).hasClass("last")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set = $(".set").first();&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set = $(set).next();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; sets.hide();&nbsp; &nbsp; &nbsp; &nbsp; $(set).fadeIn(1500);&nbsp; &nbsp; &nbsp; &nbsp; quote = 1;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; ++quote&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $(set).children().eq(quote)&nbsp; &nbsp; &nbsp; &nbsp; .fadeIn(1500)&nbsp; &nbsp; &nbsp; &nbsp; .delay(1000)&nbsp; &nbsp; &nbsp; &nbsp; .fadeOut(1000, showQuote);}showQuote();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- set 1 --><h1 style="" class="sec1-head set">Set 1<br/>&nbsp; &nbsp; <span style="" class="quotes sec1-head-quotes">Text 1.1</span>&nbsp; &nbsp; <span style="display: none;"&nbsp; class="quotes sec1-head-quotes">Text 1.2</span>&nbsp; &nbsp; <span style="display: none;"&nbsp; class="quotes sec1-head-quotes">Text 1.3</span></h1><!-- set 2 --><h1 style="" class="sec1-head set last">Set 2<br/>&nbsp; &nbsp; <span style="" class="quotes sec1-head-quotes">Text 2.1</span>&nbsp; &nbsp; <span style="display: none;"&nbsp; class="quotes sec1-head-quotes">Text 2.2</span>&nbsp; &nbsp; <span style="display: none;"&nbsp; class="quotes sec1-head-quotes">Text 2.3</span></h1>