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>

显示随机图像以及链接，没有重复图像

1 个答案: