6

我正在尝试使用 JavaScript 和/或 jQuery 将文本添加到 div 中，然后每 10 秒将该文本更改为不同的文本——有点像纯文本的幻灯片。这是我的代码：

<div id="textslide"><p></p></div>

<script>

var quotes = new Array();

quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";

var counter = 0;

while (true) {
    if (counter > 4) counter = 0;
    document.getElementById('textslide').firstChild.innerHTML = quotes[counter];
    counter++;
    setTimeout( // not sure what to put here, 500); // Want to delay loop iteration
}

</script>
4

4 回答 4

7

HTML：

<div id="textslide"><p></p></div>

JavaScript/jQuery：

var quotes = [
    "quote1",
    "quote2",
    "quote3",
    "quote4",
    "quote5",
    ];

var i = 0;

setInterval(function() {
$("#textslide").html(quotes[i]);
    if (i == quotes.length) {
        i = 0;
    }
    else {
        i++;
    }
}, 10 * 1000);

工作演示在这里

于 2013-09-28T19:52:12.263 回答
1

使用一个函数并在 body onload 上调用它

<html>
    <head>
        <script>
        var counter = 0;

        function changeText()
        {
        var quotes = new Array();

        quotes[0] = "quote1";
        quotes[1] = "quote2";
        quotes[2] = "quote3";
        quotes[3] = "quote4";
        quotes[4] = "quote5";

        if (counter > 4)
            {
            counter = 0;
            }

        document.getElementById("textslide").innerHTML = quotes[counter];

        setTimeout(function(){changeText()},10000);
        counter ++;
        }
        </script>
    </head>
    <body onload="changeText();">
        <p id="textslide"></p>
    </body>
</html>
于 2013-09-28T20:07:35.273 回答
1

这是一个使用纯 JS 的建议

function loop() {
    if (counter > 4) counter = 0;
    document.getElementById('textslide').firstElementChild.innerHTML = quotes[counter];
    counter++;
    setTimeout(loop, 500);
}
loop();

演示在这里

如果你想使用jQuery，你可以使用这个：$('#textslide p:first').text(quotes[counter]);

演示在这里

于 2013-09-28T19:53:00.003 回答
0

而不是while，使用：

setInterval(function () {
    //do your work here
}, 10000);
于 2013-09-28T19:53:25.420 回答