javascript - 随机图片加载不重复

Question

您好，我找到了一个脚本，可以将图像一个接一个地加载到我的 div 元素中。一切正常，但我希望它加载随机图像，这些图像不会在所有 images.length 的圆圈中重复。

由于我是这方面的新手，所以我尝试做一些事情，但大多数时候我能够加载随机图像但无需重复检查。

如果可以，请帮忙。

先谢谢大家了!

<script src="js_vrt/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var images = ['img_vrt/pozadine/1p.jpg', 'img_vrt/pozadine/2p.jpg', 'img_vrt/pozadine/3p.jpg', 'img_vrt/pozadine/4p.jpg'];
var image = $('#pozad');
var i = Math.floor((Math.random() * images.length));
var ist;
//Initial Background image setup
image.css('background-image', 'url(' + images[i++] + ')');
//Change image at regular intervals
setInterval(function() {

image.fadeOut(1500, function() {
image.css('background-image', 'url(' + images[i++] + ')');
image.fadeIn(1500);
});
if (i == images.length)
  i = 0;
}, 5000);
});
</script>

Answer 1

您可以使用下面答案中解释的随机播放方法。

How can I shuffle an array?

然后获取数组中的第一个元素

image.css('background-image', 'url(' + images[0] + ')');

您可能会发现此方法存在问题，即在打乱数组后加载相同的图像。在这种情况下，我建议您将显示的最后一张图像的名称存储在一个变量中，并且在对数组进行打乱之前，只需测试第一个元素是否等于最后一张图像。

var lastImageLoaded ='';

setInterval(function() {
   shuffle(images);
   var imageUrl = images[0];
   if(lastImageLoaded !== ''){ // Handle the first load
      while(lastImageLoaded === images[0]){
          shuffle(images);
      }
   }
   lastImageLoaded = image;
   image.fadeOut(1500, function() {
      image.css('background-image', 'url(' + imageUrl + ')');
      image.fadeIn(1500);
});