javascript之後的循環項目

Question

我試圖讓3張圖片緊挨着，當頁面加載時，它們每個都會淡入淡出，然後重複。我試着用每個圖片的類的數組創建一個循環。

問題是他們都在同一時間淡入淡出。

任何幫助將不勝感激。下面

代碼：

<script> 

    $('.pic').css('opacity', 0.6); 

    var picName = ["mic", "guitar", "drums"]; 

    for (var i=0; i<picName.length; i++) { 
     $("."+picName[i]).fadeTo('slow', 1).delay(1000).fadeTo('slow', 0.6); 
     $("."+picName[i]).delay(1000); 
    } 

Answer 1

謝謝克里斯託弗所有的幫助，因爲我是新來的JavaScript。這是我需要的最終代碼。

$('.pic').css('opacity', 0.6); 

    var picName = ["mic", "guitar", "drums"]; 

    setInterval(fadingPics, 9000); 

    function fadingPics() { 
     for (var i=0; i<picName.length; i++) { 
      $("."+picName[i]).delay(1000*i*3).fadeTo(1000, 1).delay(1000).fadeTo(1000, 0.6); 
     }; 
    }; 

Answer 2

你總是設定的1000的延遲你必須i乘這個值。

var picNames 
 

 
$(function() { 
 
    picNames = $('#images > div'); 
 
    picNames.css('opacity', 0.6); 
 
    imageFlash(0); 
 
}); 
 

 

 
function imageFlash(i) { 
 
    picNames.eq(i).fadeTo('slow', 1).delay(1000).fadeTo('slow', 0.6); 
 
    i++; 
 
    if (i >= picNames.length) i = 0; 
 
    setTimeout("imageFlash(" + i + ")", 1000); 
 
}

#images { white-space: nowrap; } 
 
#images > div { display: inline-block; width: 120px; height: 120px; background: green; margin: 4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="images"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>