如何让网站中的图片随机变化？答案

【问题标题】：How to make a picture change randomly in a website?如何让网站中的图片随机变化？
【发布时间】：2015-07-10 05:52:07
【问题描述】：

我想制作一个用户可以决定某事的网站。用户将单击他或她选择的内容。

我想知道每次用户点击时如何让图片变成随机的其他图片。

有什么办法吗？

【问题讨论】：

stackoverflow.com/help/how-to-ask
我已经为您发布了一个答案来解释一般概念。但是，如果您已经开始使用您的网站并希望直接围绕您使用的代码设计特定答案，请将其发布给我们，我们可以为您“定制”更直接的响应。

标签： javascript html image random

【解决方案1】：

创建一个图片数组，然后使用

Math.random();

要从您的图片数组中选择一个要显示的随机索引？？

【讨论】：

你能举个例子吗？

【解决方案2】：

这应该会给你想要的效果类型。基本上，您将图像存储在一个数组中，然后您将随机选择一个索引，然后显示它。

var yourImages = ["image1.png","image2.png","image3.png"];

var randomImage = Math.round(Math.random()*yourImages.length);
function displayImage()
{
document.write(yourImages[randomImage]);
}

在我再次阅读您的问题后，这是一个更适合您所问内容的示例。如果用户点击图片，它会变成一个随机的。

JS：

<img id="currentImage" src="defaultImage.png" onclick="changePicture()">

<script>
  function changePicture(){
   var yourImages = ["image1.png","image2.png","image3.png"];
   var randomImage = Math.round(Math.random()*yourImages.length);
   var setImg = document.getElementById("currentImage").src;
   setImg = yourImages[randomImage];
  }
</script>

jQuery:

<img id="currentImage" src="defaultImage.png">

<script>
 $("#currentImage").click(function(){
    var yourImages = ["image1.png","image2.png","image3.png"];
    var randomImage = Math.round(Math.random()*yourImages.length);
    $("#currentImage").attr("src", yourImages[randomImage]);

});
</script>

【讨论】：

【解决方案3】：

创建一个包含您要使用的图像的所有 url 的数组。例如

HTML：

<img id='the-image-to-change'/>

JS：

var imageUrls = [
 'http://placehold.it/255x255&text=A',
 'http://placehold.it/255x255&text=B',
// ... more
  'http://placehold.it/255x255&text=Z'
];

如果你不使用 jQuery：

var img = document.getElementById('the-image-to-change');
img.addEventListener("click", function() {
    this.src = imageUrls[Math.floor(Math.random() * imageUrls.length)];
});

如果 jQuery（尚未测试）

img = $('#the-image-to-change');
img.on('click', function() {
    this.src = imageUrls[Math.floor(Math.random() * imageUrls.length)];
});

【讨论】：