上海网站建设

上海网站建设

咨询热线:(021)51698180


Javascript

上海网站建设RSS订阅  RSS订阅  新浪微博  新浪微博  上海网站建设客服  客服  获取报价  获取报价

图片随机显示技巧

平常我们在页面中加入图片都是用<img src="http://www.knowsky.com/图片">来完成。如果我们要随机显示3张不同的图片就要对这句代码进行小小的修改,首先加入<script>标记:

以下是引用片段:
<script language=javascript></script> 
然后在这段标记内把<img src="http://www.knowsky.com/图片">用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="http://www.knowsky.com/+id+".gif>")
</script> 


我们还是来假设一下有3张图片,1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3。
为了让图片和链接一一对应,我们要设置一个数组image来放置链接的地址,如下:

以下是引用片段:
var image=new Array(3)
image.length=3
image[1]="url1"
image[2]="url2"
image[3]="url3" 


为了将和图片对应的链接取出来,我们还要定义一个数组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>