动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
  
   DreamWeaver → 阅读文章

 图片随机显示技巧

作者来源: 
阅读 数 116 人次 , 2006-3-29 4:46:00 


图片随机显示是一个应用非常广泛的技巧。比如随机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[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="+id+".gif>")
</script>

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

 
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:<ALT>里面如何换行</a><BR> · 下一篇:<a href="2006032928001.asp">关于meta中的keyword属性</a> </td> <td width="50%" class="link2" style="padding-top:5px;"> · <a href="2006032928070.asp">DW MX 2004 的 CSS 新功能</a><BR>· <a href="2006032928060.asp">Dreamweaver插件X档案--制作滚动文字</a><BR>· <a href="2006032928092.asp">Dreamweaver MX 2004入门教程之样式表</a><BR>· <a href="2006032927981.asp">占位图形在DW MX中的应用</a><BR>· <a href="2006032927919.asp">Dreamweaver MX 2004 CSS背景属性</a><BR> </td> </tr> </table> </td> </table> <br> <center><iframe src="http://server.dvbbs.net/dvbbs/dvbbs_soft_end_big.html" height="80" width="760" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></center> <BR> <table width="768" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td bgcolor="#4798ED" height="3" colspan="2"></td> </tr> <tr> <td height="31" align="center" background="/images/bottombg.gif" colspan="2"> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="8"><img src="/images/bottom_01.gif" width="8" height="34"></td> <td background="/images/bottom_02.gif" align="center"><a href="http://www.cndw.com/about.asp">关于本站</a> | <a href="http://www.cndw.com/contact.asp">联系我们</a> | <a href="http://www.cndw.com/join.asp">业务合作</a> | <a href="http://www.cndw.com/busslist.asp">客户案例</a> | <a href="#">诚聘英才</a> | <a href="#">广告合作</a> | <a href="#" onclick="window.external.AddFavorite(document.location.href,document.title)" onmousemove="status='收藏本页';" onmouseout="status='';">收藏本站</a></td> <td width="9"><img src="/images/bottom_03.gif" width="9" height="34"></td> </tr> </table> </td> </tr> <tr> <td height="24" valign="bottom" width="100%" style="line-height:150%" align="center"><div style="width:460px;float:center"><div style="float:left;text-align:center;padding:10px 0px;width:380px;"> 海口动网先锋网络科技有限公司版权所有<br/> <font face="Arial, Helvetica, sans-serif">Copyright © 2000 - 2006 </font><font face="Arial, Helvetica, sans-serif"><b><a href="http://www.cndw.com" style="text-decoration: none;"><font color="#000000">Cndw</font><font color="#FF6600">.Com</font></a></b></font> <br /> 中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077 <br /> <script src='http://s20.cnzz.com/stat.php?id=72017&web_id=72017&show=pic' language='JavaScript' charset='gb2312'></script> </div> <div style="width:60px;"> <a href="http://www.mmwj.cn/new/110/index.php" target="_blank"><img src="http://mm.gd.vnet.cn/index/images/gdmmga6080.gif" border="0" alt=""/></a></div></div></td> </tr> </table>