随机淡入淡出随机图片

时间:2016-02-25 21:03:16

标签: javascript jquery

我正在努力制作一个能够连续淡入和淡出随机选择的图片的功能,这样相同的图片就不会出现两次。如果单击

,我可以让它淡出/更改图像/淡入淡出一次
$("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,但这也不起作用。所有这些语言都是新手,所以请您提前感谢您的耐心等待!

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

&#13;
&#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;
&#13;
&#13;