gpt4 book ai didi

javascript - 如何从数组中每 x 秒更改一次
  • 的内容?
  • 转载 作者:太空宇宙 更新时间:2023-11-04 16:15:11 24 4
    gpt4 key购买 nike

    我想制作 li 列表,其中 jQuery 将每 2 秒更改一次内容。像游戏新闻之类的东西。问题仅在第一个周期。在第一个循环中将跳过 array 中的第二个元素。第二个循环和下一个都可以。

    这是我的代码:

    $(document).ready(function() {
    var pages = ["<li class='active'><a href='#'>Hello</a></li>", "<li class='active'><a href='#'>Hello2</a></li>", "<li class='active'><a href='#'>Hello3</a></li>"]
    var index = 0;
    setInterval(function() {
    $("#ul_news").empty().append(pages[index]);
    index++;
    if (index >= pages.length){
    index = 0;
    }
    setInterval(function(){
    $(".active").empty().append(pages[index]);
    }, 2000);
    }, 2000);

    });
    #ul_news{
    position: absolute;
    top: 0;
    left:100px;
    z-index: 20;
    }
    #ul_news li{
    z-index: 20;
    color: black;
    list-style: none;
    padding-bottom: 50px;
    }
    .non_active{
    z-index: -1000;
    }
    <!DOCTYPE html>
    <html lang="cs-cz">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
    <ul id="ul_news">
    <!--<li class="active">aho j2</li>
    <li class="non_active1">ahoj3</li>
    <li class="non_active2">ahoj4</li>
    <li class="non_active3">ahoj5</li>-->
    </ul>
    </body>
    </html>

    最佳答案

    我想你已经混淆了 setIntervalsetTimeout

    因为 setInterval 重复执行一个方法(除非用 clearInterval() 停止),您不必在其中嵌套另一个 setInterval它执行的方法:

    var pages = ["<li class='active'><a href='#'>Hello</a></li>", "<li class='active'><a href='#'>Hello2</a></li>", "<li class='active'><a href='#'>Hello3</a></li>"]
    var index = 0;
    // just a bit of caching:
    var news = $("#ul_news");
    setInterval(function() {
    news.html(pages[index]);
    index++;
    if (index >= pages.length){
    index = 0;
    }
    }, 2000);
    <!DOCTYPE html>
    <html lang="cs-cz">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
    <ul id="ul_news">
    <!--<li class="active">aho j2</li>
    <li class="non_active1">ahoj3</li>
    <li class="non_active2">ahoj4</li>
    <li class="non_active3">ahoj5</li>-->
    </ul>
    </body>
    </html>


    作为旁注,您不需要使用 .empty().append()。您可以只用一种方法来做同样的事情 html()

    关于javascript - 如何从数组中每 x 秒更改一次 <li> 的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32593354/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com