javascript - 随着时间的推移在jquery中循环文本

Question

我有分散的帮助需求。:)

我需要制作一个 jquery 脚本，其中文本显示在 div 中，并在确定的时间内进行更改。因此，例如每 7 秒 div 内容更改一次（我还必须插入淡入淡出效果）。所以我写了这段代码，但它不起作用

var caption = [
"Tip 01",
"Tip 02",
"Tip 03",
"Tip 04",
"Tip 05",
];

setInterval(function() {
    jQuery.each(caption, function() {
        $("#message-box").html(caption[i]);
    });
    }, 7 * 1000);

我哪里错了？所有这一切都是因为超大插件不支持图像上的标题，所以我必须以这种方式手动执行此操作。

message-box 是将显示 che 数组项的 div。

在此先感谢您的帮助

Answer 1

像这样使用

var i = 0;
setInterval(function() {       
$("#message-box").html(caption[i]);
i++;
if (i == caption.length){i=0;}
}, 7 * 1000);

看演示

Answer 2

像这样试试

var caption = ["Tip 01", "Tip 02", "Tip 03", "Tip 04", "Tip 05"];
var l = caption.length; // array length (here 5)
var i = 0; // set to 0 (array index starts at 0)

setInterval(function () {
    if (i > l) i = 0; 
    // when i is bigger than the total values in the array set it back to 0
    $("#message-box").html(caption[i]); // insert text from array
    i++; // add + 1 to i
}, 7000);

$.each()将直接显示数组中的最后一个值，而不是在它们之间切换