我无法显示没有重复的随机图像

Question

嗨，我正在处理将显示随机图像的任务。我的代码显示随机图像，但实际上我想显示没有重复的随机图像。如何完成这项工作。帮我。提前致谢。

var images = ['https://cdn.paperindex.com/banner/advertisement/1.jpeg', 'https://cdn.paperindex.com/banner/advertisement/2.jpeg', 'https://cdn.paperindex.com/banner/advertisement/3.jpeg', 'https://cdn.paperindex.com/banner/advertisement/4.jpeg'];

var imagesused = [];
$('.advertisement div').each(function() {
  var rand = Math.floor(Math.random() * images.length);
  $(this).append('<img src="' + images[rand] + '"/>');
  if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
  else imagesused.push(images[rand]);
});

.advertisement div img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="advertisement">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

制作原始数组的副本。并且在添加随机图像后将其从数组的副本中删除。当您从数组中删除它时，不需要创建imagesUsed。

var images = ['https://cdn.paperindex.com/banner/advertisement/1.jpeg', 'https://cdn.paperindex.com/banner/advertisement/2.jpeg', 'https://cdn.paperindex.com/banner/advertisement/3.jpeg', 'https://cdn.paperindex.com/banner/advertisement/4.jpeg'];
//making copy of original array.
var tempImgs = images.slice(0)
$('.advertisement div').each(function() {
  var rand = Math.floor(Math.random() * tempImgs.length);
  $(this).append('<img src="' + tempImgs[rand] + '"/>');         
  tempImgs.splice(rand, 1);
});

.advertisement div img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="advertisement">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

我的方法就是这样，无论你的数组有多小或多大，这种方式都可以随机化它们

首先创建一个洗牌的方法

    function shuffle(a) {
        var j, x, i;
        for (i = a.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = a[i];
            a[i] = a[j];
            a[j] = x;
        }
        return a;
    }

然后在循环数组之前使用它

images = shuffle(images);

var images = ['https://cdn.paperindex.com/banner/advertisement/1.jpeg', 'https://cdn.paperindex.com/banner/advertisement/2.jpeg', 'https://cdn.paperindex.com/banner/advertisement/3.jpeg', 'https://cdn.paperindex.com/banner/advertisement/4.jpeg'];

function shuffle(a) {
	var j, x, i;
	for (i = a.length - 1; i > 0; i--) {
	    j = Math.floor(Math.random() * (i + 1));
	    x = a[i];
	    a[i] = a[j];
	    a[j] = x;
	}
	return a;
}

   images = shuffle(images);

var imagesused = [];
$('.advertisement div').each(function(x) {
  $(this).append('<img src="' + images[x] + '"/>');
});

.advertisement div img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="advertisement">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>