时间戳

首页 > 解决方案 > 在页面 refresn 上显示不同的图像并使用带有 javascript 的计时器

javascript - 在页面 refresn 上显示不同的图像并使用带有 javascript 的计时器

问题描述

我制作了一个基本的单页 html 网站并对其进行了样式设置。我有一个小图片库（6 张图片），我想在每次刷新页面时使用 JS 以不同的顺序显示这些图片。如果页面未刷新，我希望它在计时器上刷新图像。

我知道我必须使用 Math.random，并且可以使用带有间隔计时器的 onload 来更改图像。我已经做了一些研究，但我无法弄清楚如何实现这一点。谁能指出我正确的方向？

这是图片库的 html 部分：

<section id="gallery">
    <img src="./images/1.jpg" alt="img0">
    <img src="./images/2.jpg" alt="img1">
    <img src="./images/3.jpg" alt="img2">
    <img src="./images/4.jpg" alt="img3">
    <img src="./images/5.jpg" alt="img4">
    <img src="./images/6.jpg" alt="img5">
</section>

标签： javascripthtml

解决方案

这是一个例子。

const getRandomNumber = (function() {
    var nums = [1,2,3,4,5,6];
    var current = [];
    function rand(n) {
        return (Math.random() * n)|0;
    }
    return function() {
      if (!current.length) current = nums.slice();
      return current.splice(rand(current.length), 1);
    }
}());

const images = document.querySelectorAll('#gallery img');

getRandomImages = () => {
  const imagesNums = [];
  for (let i = 1; i < 7; i++) {
    imagesNums.push(getRandomNumber());
  }

  images.forEach((img, index) => {
      img.src = `./images/${imagesNums[index]}.jpg`
  })
}

setInterval(() => {
   getRandomImages()
}, 10000);
<section id="gallery">
    <img src="./images/1.jpg" alt="img0">
    <img src="./images/2.jpg" alt="img1">
    <img src="./images/3.jpg" alt="img2">
    <img src="./images/4.jpg" alt="img3">
    <img src="./images/5.jpg" alt="img4">
    <img src="./images/6.jpg" alt="img5">
</section>

推荐阅读