javascript 一个接一个地循环项目

Question

我试图让 3 张图片并排放置，当页面加载时，每张图片依次淡入淡出，然后重复。我尝试为每张图片创建一个包含 class 数组的循环。

问题是它们同时淡入淡出。

如有任何帮助，我们将不胜感激。

代码如下：

<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

您总是将延迟设置为 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>

Answer 2

感谢 Christopher 的所有帮助，因为我是 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);
        };
    };

javascript 一个接一个地循环项目

javascript loop items after each other

loops

repeat