用JS实现网页随机图片

此代码用于实现网页上显示随机图片，多见于网站的随机banner图片。看看我最近设计的banner。

实现方法：

将所有图片的命名成一组有序的数列，然后根据随机数显示相应图片。

1.先确定显示的图片的路径，并由此写出插入图片的HTML模板。 （图片名称从0开始，如banner0.jpg ，另外图片路径建议使用绝对路径。）

var sHTML="<img src=\"image/banner{N}.jpg\">"

2.取一个不大于图片文件名中数字部分的随机数，并转为整数。 （我有7张图片，这个数我就选7）

Math.random()*7|0)

3.将图片的HTML代码模板中的数字部分替换为当前取得的随机数，并输出显示。

document.write(sHTML.replace("{N}",Math.random()*7|0))

4.完整代码示例。

<script>
var sHTML="<img src=\"http://www.vichx.com/image/bright/banner{N}.jpg\">"//插入图片的HTML代码模板
document.write(sHTML.replace("{N}",Math.random()*7|0))
/*Math.random()取到一个大于0小于1的浮点数，然后乘以7得到大于0小于7浮点数，再与0作位或运算，返回大于0小于7的整数*/
</script>

5.效果见微风博客右上角，刷新网页会显示随机图片。