利用JavaScript显示随机图像

By SoleilNeon in Techniques 2 Comments

显示随机图像有其一定的意义，比如网站的上的随机标题，或者你很懒不经常更新网站，那么显示随机图像就能让你的访问者认为你经常更新的假象，当然时间长了就不起效果了。我主要从理论上讲解用JavaScript显示随机图像的技术，至于具体应用自己决定。

利用JavaScript显示随机图像的原理。将文件名存储在一个数组中，然后用JavaScript生成数组长度范围内的随机数，最后在网页加载时加载与随机数对应的图像。原理很简单，实现起来也不复杂。

首先创建一个(X)HTML文件，在<body></body>标签中加入img元素：

<img src=”image/road.jpg” id=”randomImage” name=”randomImage” height=”300” width=”300” />

这段代码假设图片在image文件夹中。预先设置src属性是防止用户的浏览器没有开启JavaScript而显示的默认图片。id是关键，是JavaScript函数加载图像的桥梁。

接着在<body>的开始标记中加入onload属性：

<body onload=”randomImage()”>

onload属性表示加载body时触发的事件，randomImage()为处理onload事件的函数。当加载在body时调用JavaScript的randomImage()函数。

接着创建JavaScript文件，保存为randomizer.js。JavaScript文件实际上就是一个扩展名为js的文本文件。在js文件中加载图像和alt属性。添加如下代码并保存：

var chosenImage=new Array();
chosenImage[0]="stream.jpg";
chosenImage[1]="river.jpg";
chosenImage[2]="road.jpg";

var chosenAltCopy=new Array();
chosenAltCopy[0]="A stream in Iceland";
chosenAltCopy[1]="A river in Skaftafell, Iceland";
chosenAltCopy[2]="A near-deserted road in Iceland";

var getRan=Math.floor(Math.random()*chosenImage.length);

function randomImage(){
document.getElementById('randomImage').setAttribute('src','image/'+ chosenImage[getRan]);
document.getElementById('randomImage').setAttribute('alt', chosenAltCopy[getRan]);
}

chosenImage数组保存了3幅图像，chosenAltCopy保存了与图像对应的alt属性。注意chosenImage与chosenAltCopy中文件与alt对应关系。randomImage()中定义了加载图片和alt的方法。

最后将JavaScript与(X)HTML连接。在<head></head>标签中插入代码：

<script src="randomizer.js" type="text/javascript"></script>

保存。之后使用浏览器打开就能看到效果。每次刷新都是重新运算得出一个随机数并加载图像。

Related Articles.

2 Comments

Leave a Comment.