广告广告
  加入我的最爱 设为首页 风格修改
首页 首尾
 手机版   订阅   地图  繁体 
您是第 3737 个阅读者
 
发表文章 发表投票 回覆文章
  可列印版   加为IE收藏   收藏主题   上一主题 | 下一主题   
keigo
个人头像
个人文章 个人相簿 个人日记 个人地图
初露锋芒
级别: 初露锋芒 该用户目前不上站
推文 x0 鲜花 x71
分享: 转寄此文章 Facebook Plurk Twitter 复制连结到剪贴簿 转换为繁体 转换为简体 载入图片
推文 x0
[JScript][讨论] 随机图片轮播
上次教了随机广告播放后,现在要教的是另一种型的广告播放,叫做轮播。什么是轮播?顾名思义就是轮流播放,在不重整页面下一直播放各种不同的图片,这就是轮播。

轮播的原理其实跟随机播放差不多,只是多用了个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.html

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

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

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


[ 此文章被keigo在2005-09-07 19:50重新编辑 ]



欢迎各位参观小弟的Blog男丁格尔's 脱壳玩
献花 x1 回到顶端 [楼 主] From:台湾中华电信 | Posted:2005-09-06 11:21 |

首页  发表文章 发表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.134491 second(s),query:15 Gzip disabled
本站由 瀛睿律师事务所 担任常年法律顾问 | 免责声明 | 本网站已依台湾网站内容分级规定处理 | 连络我们 | 访客留言