javascript - 连续淡入淡出随机图片

Question

我正在尝试制作一个函数，可以连续淡入和淡出随机选择的图片，这样同一张图片就不会出现两次。如果单击它，我可以让它淡出/更改图像/淡入一次

$("img").click(function() { CODE });

但我每次都必须单击图像，而且我在尝试将它变成一个在页面加载时调用的函数时遇到了困难:

$(document).ready(function() {
  $("img").fadeOut(2000, function() {
    while (picPicker1 === picPicker2) {
      picPicker2 = (Math.floor(Math.random() * 5) - 1);
    }

    var source = pics[picPicker2];
    $("img").attr("src", source);
    $("img").fadeIn(2000);
    picPicker1 = picPicker2;
  });
});

pics[] 是一个包含五张不同图片网址的数组。我也尝试过使用 setInterval，但这也没有用。所有这些语言都是新手，因此提前感谢您的耐心等待!

Answer 1

setInterval 是要使用的正确函数。您在问题中提供的代码缺少结束符 });。

下面是一些使用 setInterval 来改变图像的基本代码:

JQuery:

var pics = [
  "https://placehold.it/350x150/ff0000",
  "https://placehold.it/350x150/00ff00",
  "https://placehold.it/350x150/0000ff",
  "https://placehold.it/350x150/F2F5A9",
  "https://placehold.it/350x150/FF00FF",
];

setInterval(function() {
  var picPicker2 = (Math.floor(Math.random() * 5) + 1);

  var source = pics[picPicker2];
  $("img").fadeOut(500).attr("src", source).fadeIn(500);
}, 2000);

注意:图片偶尔会重复，但我提供的代码只是供您改进的基础。

Fiddle Demo