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

Answer 2

您可以使用setInterval()，for (x = 5; x > 0; x ++) {}，var x = 0; do {} while (x = 0);或var x = 0; while (x = 0) {}。

Answer 3

＆＃13;

$(document).ready(function() {
  var picPicker, source;

	function generateImage() {
    $("img").fadeOut(2000, function() {
    picPicker = (Math.floor(Math.random() * 200));

    source = 'https://unsplash.it/400/300/?image=' + picPicker;
		
    $("img").attr("src", source);
    $("img").fadeIn(2000);
  });
  
  setTimeout(generateImage, 5000);
 }
 
 generateImage();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://unsplash.it/400/300/?image=1">

＆＃13;

随机淡入淡出随机图片

3 个答案: