| 广 告 位 置 |
|
|
|
 |
| 站 内 搜 索 |
|
|
|
|
|
|
|
|
网页中图片的随机显示
来源：盛绿设计 等级：默认等级
发布于2006-08-29 10:02 被读60次 【字体：大 中 小】
|
|
图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示，当你进入一个网站时它的banner总是不同的，或者总有内容不同的提示（tips)，大家在网上浏览时会经常发现这样的例子。使用这种技术，不但能在一定的空间里放入更多的内容，还可以给人一种经常更新的假象喔。
怎么样心动了吧？其实只要你有一点点html和javascript 的基础，一切都是这么简单。follow me，让我们来看看她随机的奥密。
让我们从一个简单的例子开始吧。平常我们在页面中加入图片都是用<img src="图片">来完成。如果我们要随机显示3张不同的图片就要对这句代码进行小小的修改，首先加入
〈script〉标记：
〈script language=javascript〉〈/script〉
然后在这段标记内把〈img src="图片"〉用document.write("")的型式放进去，就成了
document.write("〈img src=图片〉")
现在我们来完成最关建的一段：
id=Math.round(Math.random()*2)+1
这样取得随机数为1,2,3将你要显示的图片改名为1.gif,2.gif,3.gif，ok！最后的代码是：
〈script language=javascript〉
id=Math.round(Math.random()*2)+1
document.write("〈img src="+id+".gif〉")
〈/script〉 |
试一下，是不是不错？那如果我的每一张图片都对应了一个超链接该怎么办呢？
我们还是来假设一下有3张图片，1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3。
为了让图片和链接一一对应，我们要设置一个数组image来放置链接的地址，如下：
var image=new Array(3)
image.length=3
image="url1"
image="url2"
image="url3"
为了将与图片对应的链接取出来，我们还要定义一个数组imageurl=image[id]
原理是这样的：
当页面被读入时，取一个随机数，假设是2即id=2,那么如上我们可轻松的完成2.gif在页面的显示。然后我们可以看到：imageurl=image而image="url2"，剩下的事就好办了。完整的代码如下：
〈script language=javascript〉
var image=new Array(3)
image.length=3
image="url1"
image="url2"
image="url3"
id=Math.round(Math.random()*2)+1
imageurl=image[id]
document.write("〈a href="+bannerurl+"〉"+"〈img src="+id+".gif〉")
〈/script〉 |
这只是一个简单的例子，还有许多的功能可以实现，比如，设定图片的显示机率等。 |
相关专题：暂无相关专题
上一篇：网页背景设计全攻略
下一篇：弹出网页窗口全攻略(html/hta)
|
共有评论 0 条 网友评分  查看全部
|
|
|
当前位置：首 页 >> 教程资料 >> 网页制作 >> 网页中图片的随机显示
