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

您始终设置延迟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>

javascript循环项目后彼此

1 个答案: