Question

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

我有一个句子，例如：

＆＃39;我喜欢猫。＆＃39;

我想要“猫”这个词。用“狗狗”，“仓鼠”，“狮子”这些词来代替。和＆＃39; fish＆＃39;例如。每2秒，一个单词将被另一个单词更改为淡入淡出，一旦到达最后一个单词，循环将再次开始。

我目前正试图通过让所有5个单词具有不同的类，并尝试每2秒更改每个类的显示来实现此目的。但是，我是js的新手，我意识到，这是不优雅的，也可能是不正确的。

提前感谢任何帮助人员：）

Answer 1

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

代码：

<强> HTML：

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

<强>使用Javascript：

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);

JSFiddle： http://jsfiddle.net/x7wr4zLq/4/

编辑：如果你想要一个漂亮的淡出/渐变过渡，我们会忘记setInterval。我们将要使用的是带有循环函数的jQuery fadeIn()和fadeOut()。所以发生的是我们调用循环[函数一旦fadeOut被触发，在它完成之后我们检查我们是否需要重置计数器并触发fadeIn。当fadeIn完成后，我们再次调用循环函数，依此类推......等等。

delay()用于表示fadeOut。您可以将其设置为在文本消失之前显示文本的时间。

代码：

<强> HTML：

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

<强>使用Javascript：

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： http://jsfiddle.net/x7wr4zLq/3/

JS类循环和循环

1 个答案: