js图片随机显示技巧
作者:pc-king 来源:七色鸟设计 发布时间:2007-08-19 20:20: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>
这只是一个简单的例子,还有许多的功能可以实现,比如,设定图片的显示机率等,我所学有限,只能抛砖引玉,还请各位大虾多多指点。(pc-king@21cn.com)。


猜你喜欢
- 前言问题:做requests请求时遇到如下报错:{“code”:“500&
- 题目:轮盘分为三部分: 一等奖, 二等奖和三等奖;轮盘转的时候是随机的,如果范围在[0,0.08)之间,代表一等奖,如果范围在[0.08,0
- 导语:Python如何下载网页上的图片呢?今天小编给大家分享另一个Python应用小程序,就是:用Python控制摄像头录制视频!学会了也可
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 本文实例讲述了Python实现对文件进行单词划分并去重排序操作。分享给大家供大家参考,具体如下:文件名:test1.txt文件内容:But
- 前言相信大家在网上经常看到有人秀出各种各样的字符画,对于这个五彩斑斓的世界来说,我们日常看到的都是一些高清的彩色的图片,偶尔来个粗糙的黑白的
- 一、简介你一定用过那种“OCR神器”,可以把图片中的文字提取出来,极大的提高工作效率。今天,我们就来做一款实时截图识别的小工具。顾名思义,运
- 前言大家在做数据抓取的时候,经常遇到由于网络问题导致的程序保存,先前只是记录了错误内容,并对错误内容进行后期处理。原先的流程:def cra
- 本文实例讲述了Python学习笔记之字符串和字符串方法。分享给大家供大家参考,具体如下:字符串在 python 中,字符串的变量类型显示为
- 想跟大家聊聊关于 mysql 中的两个小的知识点:redo log 和 binlog 。redo log :InnoDB 存储引擎层方面的日
- 前言matplotlib画图例默认的位置是在图中的各个角落,但有时图例位置会遮挡住图像而不符合我们的需求,需要对图例位置进行调整。代码如下:
- 这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是J
- 一、前言当我们必须处理可能有多个列和行的大型DataFrames时,能够以可读格式显示数据是很重要的。这在调试代码时非常有用。默认情况下,当
- 简介在这篇文章中我将介绍如何写一个简短(200行)的 Python 脚本,来自动地将一幅图片的脸替换为另一幅图片的脸。这个过程分四步:检测脸
- JWT是一种JSON的行业标准,广泛应用在系统的用户认证方面。JWT认证简介JWT(JSON Web Tokens),是为了在网络应用环境间
- 黑夜可能漫长,但总会迎来温暖的阳光,三月如期而至,武大的樱花又一次盛开。那么今天就一起来看看怎样在python中画一棵美丽的樱花树~说到用p
- 本文实例讲述了Python面向对象之继承原理与用法。分享给大家供大家参考,具体如下:目标单继承多继承面向对象三大特性封装 根据 职责 将 属
- 1.1.1 摘要 如果说要对数据库进行优化,我们主要可以通过以下五种方法,对数据库系统进行优化。 1. 计算机硬件调优 2. 应用程序调优
- 下面十条内容的标题原本是《10 Lessons for Young Designers》,是John C. Jay给年青设计师们的十条经验教
- 如下所示:# -*- coding: utf-8 -*-#简述:一个整数,它加上100和加上268后都是一个完全平方数#提问:请问该数是多少