亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Javascript 用兩組引用文本 silder

Javascript 用兩組引用文本 silder

臨摹微笑 2022-12-29 14:14:01
我想用 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應該是可見的。而且這個循環必須繼續下去。
查看完整描述

1 回答

?
慕萊塢森

TA貢獻1810條經驗 獲得超4個贊

像這樣?


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>


查看完整回答
反對 回復 2022-12-29
  • 1 回答
  • 0 關注
  • 108 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號