Question

我想创建一个用户将决定某事的网站。用户将点击他或她选择的内容。

我想知道每次用户点击图片时如何将图片更改为随机的其他图片。

有没有办法做到这一点？

Answer 1

这可以为您提供所需的效果类型。基本上，您将图像存储在一个数组中，然后您将随机选择一个索引，然后显示它。

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 2

使用您想要使用的图像的所有网址创建一个数组。例如

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

Answer 3

创建图片数组，然后使用

Math.random();

从图片数组中选择一个将显示的随机索引??

如何在网站上随意更改图片？

3 个答案: