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/