网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > Javascript
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.Javascript实例教程(19) 使用HoT.
.JS+CSS打造可拖动的聊天窗口层.
.精美JavaScript日历代码(带农历.
.预装载以及JavaScript Image()对.
.JavaScript验证函数集合.
.用JavaScript脚本将当地时间转换.
.为JavaScript的String增加Trim函.
.利用Javascript建立Web应用.
.javascript操作cookie.
.javaScript对象和属性.
.Javascript 篱式 条件判断.
.一个非常实用的Javascript类库.
.一个非常实用的javascript读写Co.
.JavaScript的document和window对.
.用flash+javascript实现网页中复.
.Javascript控制文本框的输入法切.
.JavaScript学习笔记(5)事件处理.
.Javascript模拟的DOS窗口.
.javascript实现仿新浪信息提示效.
.JavaScript判断浏览器类型及版本.

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

发表日期:2006-6-14


图片随机显示是一个应用非常广泛的技巧。比如随机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>


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

上一篇:一个非常漂亮的脚本日历 人气:15263
下一篇:用javascript实现(页面正在加载的效果) 人气:15495
浏览全部javascript的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐