Javascript JS类循环和循环

我试图创建一段js，它将循环显示类，然后循环回到开始。为了更好地说明我的意思

我有一个句子，例如：

“我喜欢猫。”

我想用“狗”、“仓鼠”、“狮子”和“鱼”来代替“猫”。每2秒钟，一个单词将以淡入淡出的方式换成另一个单词，一旦到达最后一个单词，循环将再次开始

我目前正试图通过将所有5个单词放在不同的类中，并尝试每2秒更改一次每个类的显示来实现这一点。然而，我是js的新手，我意识到这是不雅的，而且可能是不正确的

---

提前感谢大家的帮助：）

一种方法是使用javascript的setInterval功能每2秒更改一次。 你们有一个包含动物的数组，你们可以使用计数器在其中循环。每当计数器达到数组长度减1时，它将被重置。您可以在清除setInterval时停止循环。这是用clearInterval（变量）完成的，在我们的例子中，您传入setInterval变量-animalsLoop

守则：

HTML:

<div class="js-animals"></div>

var animals = ['cats', 'dogs', 'lions', 'fish'];
var counter = 0;

var animalsLoop = setInterval(function() {

    $('.js-animals').text(animals[counter]);

    if (counter === animals.length - 1) {
        counter = 0;
    } else {
        counter++;
    }
}, 2000);

<div class="js-animals"></div>

var animals = ['cats', 'dogs', 'lions', 'fish'];
var counter = 0;

// Initialize the first animal 
// so that we don't wait for the first iteration
$('.js-animals').text(animals[counter]);

function loop() {

    $('.js-animals').delay(500).fadeOut(500, function() {

        // Check if we need to reset the counter
        if (counter === animals.length - 1) {
            counter = 0;
        } else {
            counter++;
        }

        $(this)
        .text(animals[counter])
        .fadeIn(500, loop);
    });
}

loop();

JSFiddle:

编辑：如果您想要一个好的淡出/淡入过渡，我们将忽略设置间隔。我们将使用jQuery和一个循环函数。因此，一旦淡出被触发，我们调用loop[函数，在淡出完成后，我们检查是否需要重置计数器，然后触发淡出。淡出完成后，我们再次调用loop函数，依此类推

用于延迟淡出。您可以将其设置为在文本消失之前显示文本的时间

守则：

HTML:

<div class="js-animals"></div>

var animals = ['cats', 'dogs', 'lions', 'fish'];
var counter = 0;

var animalsLoop = setInterval(function() {

    $('.js-animals').text(animals[counter]);

    if (counter === animals.length - 1) {
        counter = 0;
    } else {
        counter++;
    }
}, 2000);

<div class="js-animals"></div>

var animals = ['cats', 'dogs', 'lions', 'fish'];
var counter = 0;

// Initialize the first animal 
// so that we don't wait for the first iteration
$('.js-animals').text(animals[counter]);

function loop() {

    $('.js-animals').delay(500).fadeOut(500, function() {

        // Check if we need to reset the counter
        if (counter === animals.length - 1) {
            counter = 0;
        } else {
            counter++;
        }

        $(this)
        .text(animals[counter])
        .fadeIn(500, loop);
    });
}

loop();

---

jsFIDLE:

谢谢，文本更改非常有效。我只是想知道是否有一种方法可以在此>中添加过渡效果，即每个单词的淡入淡出？当然可以。使用jQuery，您可以在每个间隔上进行很好的过渡。我刚刚编辑了我的答案。如果您觉得有帮助，请向上投票：）New ed我已经重写了淡入淡出的代码。现在它更正确了-请检查它。