首页
学习
活动
专区
工具
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() 函数时,它会从图片数组中随机选择一张未显示过的图片,并将其显示在页面中。当所有图片都显示过一次后,它会重新开始显示。

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

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

相关·内容

  • zblogPHP万能型主题模板希望(Hopelee)全新绽放,独具热爱,自成一派

    HI又发布新主题了,这半年过的实属不易,如人饮水,冷暖自知啊,人类的悲喜并不相通,悲喜自渡是我们一生的必修课,无论怎样我们始终要相信人生总会有不期而遇的温暖和生生不息的希望! 所以我们新款主题的名称就是“希望”,有了希望就有奔头,我遵循的是1+1=N的风格,可能这也是很多人说我的主题模板风格很相似的原因吧。不管怎样,喜欢就好,毕竟追求源于热爱。先介绍下大家比较关心的几个问题,首先需要安装zblogPHP版本(一般来说安装最新版即可),不会安装的查看此地址:zblog安装图文教程,附zblog主题下载及使用教程,程序安装完成之后,需要下载和开启主题,如果您是在应用中心购买的,可以忽略前半部分,直接查看主题设置内容接口。

    03
    领券