JS类循环和循环

JS class cycle and loop

本文关键字：循环 JS      更新时间：2023-09-26

我正在尝试创建一段js，它将循环显示类，然后循环回到起点。为了更好地说明我的意思；

我有一句话，例如：

"我喜欢猫。"

例如，我希望用"狗"、"仓鼠"、"狮子"answers"鱼"代替"猫"。每2秒，一个单词将被渐变为另一个单词，一旦达到最后一个，循环将再次开始。

我目前正试图通过将所有5个单词与不同的类进行比较，并尝试每2秒更改每个类的显示。然而，我是js的新手，我意识到这是不雅的，而且可能是不正确的。

提前感谢大家的帮助：）

一种方法是使用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被触发，我们就会调用loop[函数，在它完成后，我们检查是否需要重置计数器，然后触发fadeIn。当fadeIn完成时，我们再次调用loop函数，以此类推…

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/

相关文章：