各位应该会发现上某些网站时，每次进去看到的广告都不一样，且点下去连到的网站也不同，其实这算是蛮常见的随机广告。今天要来介绍三种单一图片的随机图片显示效果。

这三种差异的地方只是在JavaScript里面的function有点小不同，在HTML的部份其实都是一样的，下面先来看在Body的部份：



在onLoad时呼叫了showImg()这个方法，我会把图片给放到Div里面。在介绍这三种效果时，Body这部份都是相同的喔。

先说一下等等要显示的图片，这边我准备了五张大小一样的图片，依序命名为banner0.gif、banner1.gif、banner2.gif、banner3.gif、banner4.gif。

OK，让我们来一一来看这三种效果的showImg()吧。

第一种：



最常见的方法就是用乱数来选出要显示的图片，因为是数字嘛~所以在图片档名的部份最好是要带有规则的数字，但是要小心的是，在JavaScript中用Math.random()所产生出来的乱数是介于0~1之间的数字，但是我们的图片是从0~4，所以要再乘以5才行，最后再用Math.round()或是Math.floor()来取得整数即考。接着在my_div中放入<img>的标签且把src指定为图片的名称加上乱数产生出来的数字，酱就能做出第一种的的效果了。

第二种：



其实做法跟第一种是一样的，只是这边我用了myImg阵列来存放所要显示的图片档名，酱子在图片的命名上，就可以不用像第一种一样要有顺序规则。

第三种：



这一种就是一开始说的，广告图片不同且点下去后能连结到各自的网站去。做法跟第二种类似，只是这次用的是二维阵列来存放图片档名及所要连结的网址，阵列的用法应该不用我再教了吧。

范例浏览：

http://abgne.myweb.hinet....003_1.html

http://abgne.myweb.hinet....003_2.html

http://abgne.myweb.hinet....003_3.html

浏览范例时可以多重整几次来看变化喔。

以上内容于2005/09/01发表在小弟的Blog里http://blog.xuite.net/abgne/diary1/3867092

GOOD
好样的
我就线哪来试试噜