显示随机图像有其一定的意义,比如网站的上的随机标题,或者你很懒不经常更新网站,那么显示随机图像就能让你的访问者认为你经常更新的假象,当然时间长了就不起效果了。我主要从理论上讲解用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>
保存。之后使用浏览器打开就能看到效果。每次刷新都是重新运算得出一个随机数并加载图像。
嘿嘿 有用的~~~可以造成假象~~很适合我啊
我没有说你懒啊,哈哈