首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在JS中不重复显示随机多张图片?

在JS中实现不重复显示随机多张图片的方法有多种,以下是一种常见的实现方式:

  1. 首先,准备一个包含所有图片路径的数组,例如:
代码语言:txt
复制
var images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  // 其他图片路径
];
  1. 创建一个用于存储已显示过的图片的数组,例如:
代码语言:txt
复制
var displayedImages = [];
  1. 创建一个函数来获取随机图片并显示,例如:
代码语言:txt
复制
function getRandomImage() {
  // 如果所有图片都已经显示过,则重新开始
  if (displayedImages.length === images.length) {
    displayedImages = [];
  }

  var randomIndex;
  var image;

  // 循环直到找到一个未显示过的图片
  do {
    randomIndex = Math.floor(Math.random() * images.length);
    image = images[randomIndex];
  } while (displayedImages.includes(image));

  // 将图片添加到已显示过的数组中
  displayedImages.push(image);

  // 在页面中显示图片
  var imgElement = document.createElement('img');
  imgElement.src = image;
  document.body.appendChild(imgElement);
}
  1. 调用函数来显示随机图片,例如:
代码语言:txt
复制
getRandomImage();

每次调用 getRandomImage() 函数时,它会从图片数组中随机选择一张未显示过的图片,并将其显示在页面中。当所有图片都显示过一次后,它会重新开始显示。

这是一个简单的实现方法,你可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券