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>

Answer 2

谢谢大家。现在，我的图像从数组中随机显示。但仍然不能弄清楚图像。

 var img_array = [
        "laugh.jpg",
        "sad-face.jpg",
        "smiley.jpg",
        "artists.jpg",
        "detective.jpg",
        "monster.jpg",
        "smileyface.jpg",
        "tear.jpg",
        "tongue.jpg"
      ];
      
      /* run function every 'set up' time */
      setInterval(function() {
        randomImages();
      }, 1500);

      /* Generate random images and display from the array */
      function randomImages() {
        var randomImage =
          img_array[Math.floor(Math.random() * img_array.length)];

        /* randomly choose from html element */
        var arrayImg = document.getElementById("random").children;

        var randomArrayImg =
          arrayImg[Math.floor(Math.random() * arrayImg.length)];



        randomArrayImg.src = randomImage;

        // document.querySelector(".imgsrc").value = randomImage;
      }

#random {
        display: flex;
        justify-content: space-between;
        width: 1000px;
        margin: 50px auto;
      }

      img {
        width: 150px;
        height: 150px;
      }

<div id="random">
      <img src="laugh.jpg" class="imgsrc" alt="" />

      <img src="sad-face.jpg" class="imgsrc" alt="" />

      <img src="detective.jpg" class="imgsrc" alt="" />

      <img src="tongue.jpg" class="imgsrc" alt="" />

      <img src="tear.jpg" class="imgsrc" alt="" />
  </div>

如何在JS中不重复显示随机的多个图像？

2 个答案: