手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>Dreamweaver>列表

图片随机显示技巧

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

  图片随机显示是个应用很广泛的技巧。比如随机banner的显示,当您进入一个网站时他的banner总是不同的,或总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子。使用这种技术,不但能在一定的空间里放入更多的内容,还能够给人一种经常更新的假象喔。

  怎么样心动了吧?其实只要您有一点点html和javascript 的基础,一切都是这么简单。follow me,让我们来看看她随机的奥密。

  让我们从一个简单的例子开始吧。平常我们在页面中加入图片都是用来完成。假如我们要随机显示3张不同的图片就要对这句代码进行小小的修改,首先加入

  

  然后在这段标记内把用document.write("")的型式放进去,就成了

  document.write("")

  现在我们来完成最关建的一段:

  id=Math.round(Math.random()*2) 1

  这样取得随机数为1,2,3将您要显示的图片改名为1.gif,2.gif,3.gif,ok!最后的代码是:

  

  试一下,是不是不错?那假如我的每一张图片都对应了一个超链接该怎么办呢?

  我们还是来假设一下有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",剩下的事就好办了。完整的代码如下:

  

  这只是个简单的例子,更有许多的功能能够实现,比如,设定图片的显示机率等,请到本人主页:http://www.avyes.com看看效果,我所学有限,只能抛砖引玉,还请各位大虾多多指点。(pc-king@21cn.com)。

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!