JS类循环和循环

Question

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

我有句话，例如：

'我喜欢猫'。

例如，我想用“狗”，“仓鼠”，“狮子”和“鱼”两个词来代替“猫”一词。每隔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()用于淡入淡出。您可以将其设置为在文本消失之前显示文本多长时间。

代码：

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/