时间戳

首页 > 解决方案 > 显示随机图像以及链接并且没有重复图像

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

问题描述

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

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>

标签： javascripthtmlcss

解决方案

您可以将您的数字放入一个数组中并测试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>

推荐阅读