javascript - JS如何实现随机多张图片不重复显示？

Question

我只能显示第一个 div，无法弄清楚如何随机显示 div 的其余部分。提前致谢!

/* 这是我的 JS*/

  var img_array = ["bomb.gif", "frown.gif", "grim.gif", "smile.gif"];

  /* run function every 'set up' time */
  setInterval(function() {
    randomImages();
  }, 2500);

  /* Generate random images and display from the array */
  function randomImages() {
    var randomImage =
      img_array[Math.floor(Math.random() * img_array.length)];

    var imgNode = document.querySelector(".imgsrc");

    imgNode.classList.remove("random");
    imgNode.classList.add("transitioning-src");

    setTimeout(() => {
      imgNode.src = randomImage;
      imgNode.classList.remove("transitioning-src");
      imgNode.classList.add("random");
    }, 500);

    document.querySelector(".imgsrc").src = randomImage;
  }

Answer 1

正如我在评论中所说，它是 DOM <li>您需要随机选择并显示的节点，而不是第一个 img 的 src元素，因为您的 HTML 中已经包含了所有图像。有一个例子:

const imgList = ['bomb.gif', 'frown.gif', 'grim.gif', 'smile.gif'];

/* Run function every 'set up' time */
setInterval(function() {
  randomImages();
}, 2500);

/* Show random image */
function randomImages() {
  const img = document.querySelector('ul#random > li.logo > img');
  const nextSrc = imgList[Math.floor(Math.random() * imgList.length)];
  
  img.src = nextSrc;
  img.alt = nextSrc;
}

<ul id="random">
  <li class="logo">
    <img src="bomb.gif" class="imgsrc" alt="bomb.gif" />
  </li>
</ul>

但您也可以使用图像数组并更新 src属性，但一个 <li>足够了:

/* Run function every 'set up' time */
setInterval(function() {
  randomImages();
}, 2500);

/* Show random <li> */
function randomImages() {
  const liNodes = document.querySelectorAll('ul#random > li.logo');
  const next = Math.floor(Math.random() * liNodes.length);
  
  for (let i in liNodes) {
    const li = liNodes[i];
    
    if (li instanceof HTMLElement) {
      li.style.display = 'none';
    }
  }
  
  liNodes[next].style.display = '';
}

<ul id="random">
  <li class="logo">
    <img src="bomb.gif" class="imgsrc" alt="bomb.gif" />
  </li>

  <li class="logo" style="display:none" >
    <img src="smile.gif" class="imgsrc" alt="smile.gif" />
  </li>

  <li class="logo" style="display:none" >
    <img src="frown.gif" class="imgsrc" alt="frown.gif" />
  </li>

  <li class="logo" style="display:none" >
    <img src="grim.gif" class="imgsrc" alt="grim.gif" />
  </li>
</ul>