网页特效:图片随机显示技巧

http://www.knowsky.com/图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子。使用这种技术,不但能在一定的空间里放入更多的内容,还可以给人一种经常更新的假象喔。 
怎么样心动了吧?其实只要你有一点点html和javascript 的基础,一切都是这么简单。follow me,让我们来看看她随机的奥密。 
让我们从一个简单的例子开始吧。平常我们在页面中加入http://www.knowsky.com/图片都是用<img src="http://www.knowsky.com/图片">来完成。如果我们要随机显示3张不同的http://www.knowsky.com/图片就要对这句代码进行小小的修改,首先加入<script>标记: 
以下是引用片段:
<script language=javascript></script> 
然后在这段标记内把<img src="http://www.knowsky.com/图片">用document.write("")的型式放进去,就成了 
document.write("<img src=http://www.knowsky.com/图片>")   

现在我们来完成最关建的一段: 
以下是引用片段:
id=Math.round(Math.random()*2) 1   

这样取得随机数为1,2,3将你要显示的http://www.knowsky.com/图片改名为1.gif,2.gif,3.gif,ok!最后的代码是: 
以下是引用片段:
<script language=javascript>
id=Math.round(Math.random()*2) 1
document.write("<img src="http://www.knowsky.com/ id ".gif>")
</script>   

试一下,是不是不错?那如果我的每一张http://www.knowsky.com/图片都对应了一个超链接该怎么办呢?
我们还是来假设一下有3张http://www.knowsky.com/图片,1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3。
为了让http://www.knowsky.com/图片和链接一一对应,我们要设置一个数组image来放置链接的地址,如下: 
以下是引用片段:
var image=new Array(3)
image.length=3
image[1]="url1"
image[2]="url2"
image[3]="url3"   

为了将与http://www.knowsky.com/图片对应的链接取出来,我们还要定义一个数组imageurl=image[id]
原理是这样的:
当页面被读入时,取一个随机数,假设是2即id=2,那么如上我们可轻松的完成2.gif在页面的显示。然后我们可以看到:imageurl=image[2]而image[2]="url2",剩下的事就好办了。完整的代码如下: 
以下是引用片段:
<script language=javascript>
var image=new Array(3)
image.length=3
image[1]="url1"
image[2]="url2"
image[3]="url3"
id=Math.round(Math.random()*2) 1
imageurl=image[id]
document.write("<a href=" bannerurl ">" "<img src="http://www.knowsky.com/ id ".gif>")
</script> 

转自:七色鸟设计---pc-king

 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [javascript] 的这些文章也感兴趣:

JavaScript判断浏览器类型及版本
用javascript在客户端调用CRM Web Service
基于对象的JavaScript语言
Javascript 调用 Webservice ,处理返回的XML数据
JScript中正则表达式用法详解(附例子:JScript做语法加亮显示)
利用免费javascript框架构建强大web接口界面
用JavaScript实现上下文字滚动特效
Javascript模拟游戏中的弹出菜单效果
全面理解javascript的caller,callee,call,apply概念
用javascript实现(页面正在加载的效果)