javascript - 随机图像选择

Question

我有以下但它不工作。重点是每次浏览器刷新时随机显示以下 4 张图片中的任何一张。有帮助吗？

https://jsfiddle.net/benjones337/690zc6h8/

HTML:

<p>
  <img id="image" />
</p>

JS:

function Randomize() {
  var images = ["http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
              "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
              "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
              "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];

  var imageNum = Math.floor(Math.random() * images.length);
  document.getElementById("divid").style.backgroundImage = "url('" + images[imageNum] + "')";
}

window.onload = Randomize;

Answer 1

首先:您需要一个 ID 为 divid 的 div。

其次:jsfiddle 在 https 中加载，图片在 http 中加载，因此浏览器不允许。

第三:jsfiddle 已经运行 onload —— 所以你的代码不会运行。

第四:我在 div 中添加了一些 css，以便显示背景图像。

试试这个:https://jsfiddle.net/maniator/2nxm19fh/

function Randomize() {
  var images = [
    "//static.ddmcdn.com/gif/lightning-gallery-18.jpg",
    "//static.ddmcdn.com/gif/lightning-gallery-19.jpg",
    "//static.ddmcdn.com/gif/lightning-gallery-20.jpg",
    "//static.ddmcdn.com/gif/lightning-gallery-17.jpg"
  ];
  var imageNum = Math.floor(Math.random() * images.length);
  document.getElementById("divid").style.backgroundImage = "url('" + images[imageNum] + "')";
}

Randomize();