如何使网站中的图片随机变化？

Question

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

我想知道如何让用户每次点击图片时随机切换到其他图片。

有什么办法吗？

Answer 1

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

Math.random();

select 将要显示的图片数组中的随机索引？？

Answer 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>

Answer 3

创建一个数组，其中包含您要使用的图片的所有网址。例如

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)];
});

if jQuery（未测试）

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

如何使网站中的图片随机变化？

How to make a picture change randomly in a website?

html

javascript

random

image