javascript：刷新时选择的随机图像

Posted 2023-02-25

【中文标题】javascript：刷新时选择的随机图像

【英文标题】：javascript: random image selected on refresh

【发布时间】：2013-05-01 22:39:53

【问题描述】：

所以我有一个网站，其中有一个描述区域，我使用以下代码将其作为刷新时的随机描述：

<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 和一些附加功能，但我真的不确定。

谢谢！

【参考方案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。

【讨论】：

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

@urban_racoons - 如果我在 Rails 的资产管道中使用图像，这段代码会起作用吗？ IE- var description = [ "images/imageOne.jpg", etc etc

@JaredMichaelCzerew 是的，只要 会正确评估。如果此代码位于 rails 模板中，则可能有一种（更好的？）方法可以使用 rails 框架本身来执行此操作。

【参考方案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]);

【参考方案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];