上次教了随机广告播放后,现在要教的是另一种型的广告播放,叫做轮播。什么是轮播?顾名思义就是轮流播放,在不重整页面下一直播放各种不同的图片,这就是轮播。
轮播的原理其实跟随机播放差不多,只是多用了个setInterval()函式而已。
让我们来看要怎样才能做到这样的效果吧。接下来所用的范例是随机广告播放中的第二个范例。不知道的可以先来看看这一篇:http://blog.xuite.net/abgne/diary1/3867092
在Body的部份并没有做任何修改。
在JavaScript的部份,我只是把myImg阵列中的图片换成比较可爱的男生图,在showImg()函式中一样没做任何改变。
这边要注意的是我用了setInterval("showImg()",2000);这个就是本次要教的重点。setInterval()函式需要带入两个参数,第一个是所要执行的函式,第二个是每隔几毫秒要执行一次。所以这边我们是设成每隔2000毫秒(2秒)就执行一次showImg()函式,酱就能做到N张图片随机轮播了。
有人问说:如何做到在N张图片中选出M张来做随机的轮播呢?
我们拿刚刚的范例来修改一下就能做到酱的效果了,在Body部份一样是不用做修改,所以直接来看JavaScript吧!
我多宣告了一个长度为3的playImg()阵列来存放选出来后的图片,用nowIndex来纪录目前是播放到playImg()阵列中的第几个位置,接下来就是用for回圈来从myImg()阵列中随机选3张图放到playImg()阵列中。到这里应该都还不难理解吧。
因为要控制图片能从第一张、第二张...酱子播放到最后一张时,能继续回到第一张的循环播放,所以在指定nowIndex时要判断nowIndex+1后是否大于等于playImg()阵列的长度。
不过若多重整几次上面的范例时,不知道您有没有发现到图片并没有变化,正确的说法应该是图片重覆,所以看起来会觉得没变化。会酱子是因为我们在从myImg()阵列中取图放到playImg()阵列时,我们并没有判断图片是否已经存在playImg()阵列中了,所以才会发生图片有重覆的情况。
让我们来修改一下Code做个重覆的检验吧。
重覆的判断只要写在for回圈中就行了,多个回圈来把刚从myImg()阵列中取出的图片跟playImg()阵列中的做比较。酱子改过就能做到N张取M张来轮播且图片不会重覆啰。
范例浏览:
http://abgne.myweb.hinet....005_1.htmlhttp://abgne.myweb.hinet....005_2.htmlhttp://abgne.myweb.hinet....005_3.html以上内容于2005/09/06发表在小弟的Blog里
http://blog.xuite.net/abgne/diary1/3900476