Question

我正在学习jQuery和JS。我有文字：

<p><em>"My text 1"</em></p>

如何实现简单的文本滑块（可能是带有文本的数组，它会在5s后更改）？我可以使用什么功能？我需要数组：

"My text 1"
"My text text"
"My text my text"
"My text other"

Answer 1

var myTexts = new Array("My text 1", 
                        "My text text", 
                        "My text my text", 
                        "My text other");
var currentText = 0;

var timeout = setInterval(nextText, 5000);

function nextText() {
    if (currentText >= myTexts.length) {
        currentText = 0;
    } else {
        currentText++;
    }

    $('em').html(myTexts[currentText]);
}

基本上上面的代码是：

在数组中设置文字
设置每隔5秒调用nextText（）的间隔
在函数中检查要显示的文本（基于数组的长度）
使用jquery的html（）方法更改'em'元素中的文本。

-edit：拼写错误...

Answer 2

Settimeout功能。例如：

$(document).ready(function(){
      setTimeout(function(){
        $('#yourDivId').html('<p><em>Another text</em></p>');
      }, 2000);

})

这将在2秒后更改div中的文字。

Answer 3

您可以使用：

var terms = ["My text 1", "My text text", "My text my text", "My text other"];

function rotateTerm() {
    var ct = $("#rotate").data("term") || 0;
    $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1)
                .text(terms[ct])
                .fadeIn().delay(5000).fadeOut(200, rotateTerm);
};
rotateTerm();

<强> Fiddle Demo

在jQuery中从数组中更改文本

3 个答案: