Question

标题基本上都说明了一切。

我正在尝试将图像从图像数组中更改为随机图像（希望这很有意义）。

如何创建图像数组，然后在点击某些内容时将图像更改为随机图像？

<h1>These are just placeholders</h1>
<p>I just want these images to randomly change to an image from an array of images each time they are shown (when "display" isn't "none")</p>
<img src="https://pixabay.com/static/uploads/photo/2013/11/21/07/30/icon-214446_960_720.jpg" class="newsAD"></img>
<img src="https://pixabay.com/static/uploads/photo/2013/11/21/07/30/according-to-214445_960_720.jpg" class="newsAD"></img>

<style>
    .newsAD {
      width: 150px;
      height: 150px;
      margin-left: 50px;
      background: skyblue;
      cursor: default;
      box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.4);
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
function changeImageToRandomImage() {
 // something here that changes image to random image from array of images
}
</script>

Here's a fiddle.

Answer 1

在这种情况下，您可以将图像存储在某个位置，然后将它们的路径存储在数组中并像这样调用它们：

HTML

<img onclick="changeImageToRandomImage()" id="image" src="img/image_0.jpg">

的JavaScript

function changeImageToRandomImage() {
   images = ['img/image_1.jpg', 'img/image_2.jpg','img/image_3.jpg','img/image_4.jpg'];

   var random = images[Math.floor(Math.random()*images.length)];
   document.getElementById('image').src= random;

}

Answer 2

此example显示如何使用常规（非Ajax）网页执行此操作，其中图像以数组形式列出，生成的随机数用于从中选择特定图像。另一种方法是在服务器端实现随机图像选择（例如NodeJS），并在客户端上使用相同的Ajax调用来触发服务器选择器逻辑。

从图像阵列中随机更改图像

2 个答案: