图片随机显示技巧

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

id=Math.round(Math.random()*2)+1
document.write("")

试一下,是不是不错?那如果我的每一张图片都对应了一个超链接该怎么办呢?
我们还是来假设一下有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",剩下的事就好办了。完整的代码如下:

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(""+"")

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

时间: 2024-08-01 02:43:58

图片随机显示技巧的相关文章

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

技巧|随机|网页|网页特效|显示 图片随机显示是一个应用非常广泛的技巧.比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子.使用这种技术,不但能在一定的空间里放入更多的内容,还可以给人一种经常更新的假象喔. 怎么样心动了吧?其实只要你有一点点html和javascript 的基础,一切都是这么简单.follow me,让我们来看看她随机的奥密. 让我们从一个简单的例子开始吧.平常我们在页面中加入图片都

网页特效:图片随机显示实例详解

随机|特效|网页|网页特效|显示|详解 图片随机显示是一个应用非常广泛的技巧.比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子.使用这种技术,不但能在一定的空间里放入更多的内容,还可以给人一种经常更新的假象喔. 怎么样心动了吧?其实只要你有一点点html和javascript 的基础,一切都是这么简单.follow me,让我们来看看她随机的奥密. 让我们从一个简单的例子开始吧.平常我们在页面中加入

javascript随机显示背景图片的方法_javascript技巧

本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi

网页中图片的随机显示

随机|网页|显示 图片随机显示是一个应用非常广泛的技巧.比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子.使用这种技术,不但能在一定的空间里放入更多的内容,还可以给人一种经常更新的假象喔.怎么样心动了吧?其实只要你有一点点html和javascript 的基础,一切都是这么简单.follow me,让我们来看看她随机的奥密. 让我们从一个简单的例子开始吧.平常我们在页面中加入图片都是用<img sr

JS实现页面载入时随机显示图片效果_javascript技巧

本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

PHP 获取目录下的图片并随机显示的代码_php技巧

当时想做一个随机更换背景图片的功能,用JavaScript写的话,程序流程应该是:建立一个图片数组->随机选择数组里其中一个值->生成样式并写入body标签. 可是用JS做的话,有以下缺点: 1.万一浏览器禁用了JS的话就失效了,而且写代码是需要考虑兼容性. 2.维护比较麻烦,图片的位置都存放在数组里. 于是我提议用PHP处理,可是我和她对PHP都是半桶水的,一时之间也想不出怎么做.今天时运高,看到一个PHP随机显示目录下图片的源码,学习一下,并分享之.  先看看原理:从一个目录里获取某类型文

php随机显示指定文件夹下图片的方法_php技巧

本文实例讲述了php随机显示指定文件夹下图片的方法.分享给大家供大家参考.具体如下: 此代码会从指定的服务器文件夹随机选择一个图片进行显示,非常有用,图片格式为.gif,.jpg,.png <?php //This will get an array of all the gif, jpg and png images in a folder $img_array = glob("/path/to/images/*.{gif,jpg,png}",GLOB_BRACE); //Pi

网页实用技巧:随机显示不同页面背景

技巧|随机|网页|显示|页面 运行时,按F5便可看效果! <script>s=new Array(3)s[0]=Math.floor(Math.random()*256)+""s[1]=Math.floor(Math.random()*256)+""s[2]=Math.floor(Math.random()*256)+""a=s[0]+s[1]+s[2]document.write("<body bgcolor=&qu

Javascript实例教程(10) 随机显示图片

javascript|教程|随机|显示 利用javascript随机显示图片 有时你可以会在一些网站看到一些变化显示的图片,这除了可以利用Flash来制作之外,当然也可以利用本节教程介绍的方法来实现哦.好吧,就开始我们的创作吧.我们可以在网页的最前面部分添加以下的代码来创建一个随机的数字: <SCRIPT> <!-- // Randomizer rnd.today=new Date(); rnd.seed=rnd.today.getTime(); function rnd() { rnd