javascript - 显示随机图像和链接并且没有重复图像

Question

您好，我尝试显示带有链接且没有图像重复的随机图像。我的代码只显示一张图片。但实际上我想在页面刷新时分别显示三个图像而不重复。帮我完成这件事。提前致谢。

var total_images = 7;
var image = document.getElementById('banner');
var random_number = Math.floor((Math.random() * total_images));
var random_img = [];

random_img[0] = '<a href="https://cdn.paperindex.com/banner/advertisement/1.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/1.jpeg"></a>';
random_img[1] = '<a href="https://cdn.paperindex.com/banner/advertisement/2.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/2.jpeg"></a>';
random_img[2] = '<a href="https://cdn.paperindex.com/banner/advertisement/3.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/3.jpeg"></a>';
random_img[3] = '<a href="https://cdn.paperindex.com/banner/advertisement/4.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/4.jpeg"></a>';
random_img[4] = '<a href="https://cdn.paperindex.com/banner/advertisement/5.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/5.jpeg"></a>';
random_img[5] = '<a href="https://cdn.paperindex.com/banner/advertisement/6.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/6.jpeg"></a>';
random_img[6] = '<a href="https://cdn.paperindex.com/banner/advertisement/7.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/7.jpeg"></a>';

image.innerHTML = random_img[random_number];

#banner a img {
  width: 100px;
  height: 100px;
}

<div id="banner"></div>

Answer 1

你可以把你的数字放在一个数组中并用 indexOf 测试它是否已经存在(请注意，所有这些都可以在一个循环中完成以更通用，只是要注意数组索引以 0 开头，如果您的名字以 1 开头，请不要忘记减去 1):

var total_images = 7;
var image1 = document.getElementById('banner1');
var image2 = document.getElementById('banner2');
var image3 = document.getElementById('banner3');
var random_numbers = [];
var random_number;
var random_img = [];

random_img[0] = '<a href="https://cdn.paperindex.com/banner/advertisement/1.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/1.jpeg"></a>';
random_img[1] = '<a href="https://cdn.paperindex.com/banner/advertisement/2.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/2.jpeg"></a>';
random_img[2] = '<a href="https://cdn.paperindex.com/banner/advertisement/3.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/3.jpeg"></a>';
random_img[3] = '<a href="https://cdn.paperindex.com/banner/advertisement/4.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/4.jpeg"></a>';
random_img[4] = '<a href="https://cdn.paperindex.com/banner/advertisement/5.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/5.jpeg"></a>';
random_img[5] = '<a href="https://cdn.paperindex.com/banner/advertisement/6.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/6.jpeg"></a>';
random_img[6] = '<a href="https://cdn.paperindex.com/banner/advertisement/7.jpeg"><img src="https://cdn.paperindex.com/banner/advertisement/7.jpeg"></a>';

while(random_numbers.length < 3){
  random_number = Math.floor((Math.random() * total_images));
  if(random_numbers.indexOf(random_number) < 0){
    random_numbers.push(random_number);
  }
}

image1.innerHTML = random_img[random_numbers[0]];
image2.innerHTML = random_img[random_numbers[1]];
image3.innerHTML = random_img[random_numbers[2]];

#banner1 a img, #banner2 a img, #banner3 a img {
  width: 100px;
  height: 100px;
}

<div id="banner1"></div>
<div id="banner2"></div>
<div id="banner3"></div>