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

    if($(set).children().eq(quote).is(':last-child')) {

        if($(set).hasClass("last")) {

            set = $(".set").first();

        } else {

            set = $(set).next();

        }

        sets.hide();

        $(set).fadeIn(1500);

        quote = 1;

    } else {

        ++quote

    }

    

    $(set).children().eq(quote)

        .fadeIn(1500)

        .delay(1000)

        .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/>

    <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 last">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>