JavaScript：刷新时随机选择图像

Question

我有一个网站，在这个网站中，我有一个描述区域。我想让每次刷新页面时，这个描述区域显示不同的随机描述信息。可以使用以下代码实现：

<script type="text/javascript">
var description = new Array ();
description[0] = "I can change";
description[1] = "Isn't it cool";
description[2] = "these are just to show you guys";
description[3] = "another thing";
var size = description.length
var x = Math.floor(size*Math.random())
document.write(description[x]);
</script>

现在我的问题是，如果我想让它在刷新时显示随机图片而不是随机描述，我该怎么做？我认为这需要一些jquery和一些附加操作，但我真的不确定。

谢谢！

- Ryan Saxe

Answer 1

可以这样：

HTML:

<img id="image" />

JS：

var description = [
  "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg",
  "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-21.jpg"
];

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

不需要使用jQuery。

- urban_raccoons

---

请注意，这需要在<img>元素之后的脚本元素中或包装在onload处理程序中。+1。 - nnnnnn

@urban_racoons - 如果我在Rails的资产管道中使用图像，这段代码能否正常工作？比如：var description = [ "images/imageOne.jpg"，等等。 - Jared Michael Czerew

@JaredMichaelCzerew 是的，只要 <img src="images/imageOne.jpg"> 能够正确地评估即可。如果此代码位于Rails模板中，则可能有一种（更好的？）方法可以使用Rails框架本身来完成此操作。 - urban_raccoons

Answer 2

http://jsfiddle.net/mohammadAdil/SvswX/

<img id='random'/>

脚本 -

var image = new Array ();
image[0] = "http://placehold.it/20";
image[1] = "http://placehold.it/30";
image[2] = "http://placehold.it/40";
image[3] = "http://placehold.it/50";
var size = image.length
var x = Math.floor(size*Math.random())

$('#random').attr('src',image[x]);

- Adil Shaikh

Answer 3

您可以使用以下代码在页面中添加带有图片的链接：
首先将以下内容插入到您的页面中：

<a id='LinksRef'>
<img id='BannersSrc'>
</a>

那么

var Banners= [
  "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg",
  "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-21.jpg"
];

var Links= [
  "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg",
  "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-21.jpg"
];
var size = Banners.length
var x = Math.floor(size*Math.random())
document.getElementById('BannersSrc').src=Banners[x];
document.getElementById('LinksRef').href=Links[x];

- Amin Arjmand