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

随机|特效|网页|网页特效|显示|详解

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

时间: 2024-09-30 04:39:16

网页特效:图片随机显示实例详解的相关文章

Android 图片存入系统相册更新显示实例详解

Android 图片存入系统相册更新显示实例详解 在开发android的过程中,我们避免不了可能会涉及到做一个自定义相册或则会去本地创建一个文件夹来存储我们需要的图片.拿相册来说,比如我们创建一个test的文件夹,拍完一张照片后存储到这个指定的test文件夹里,然后在相册里面显示出来,就像微信的效果一样.拍完即可立即显示.但是,在实际开发过程中我们保存完一张图片后并不能立即更新显示出来这个图片,需要我们重启手机才能在系统相册中显示出来. 这里先提供一个插入系统图库的方法: MediaStore.

Android编程之软键盘的隐藏显示实例详解_Android

本文实例分析了Android编程之软键盘的隐藏显示方法.分享给大家供大家参考,具体如下: Android是一个针对触摸屏专门设计的操作系统,当点击编辑框,系统自动为用户弹出软键盘,以便用户进行输入. 那么,弹出软键盘后必然会造成原有布局高度的减少,那么系统应该如何来处理布局的减少?我们能否在应用程序中进行自定义的控制?这些是本文要讨论的重点. 一.软键盘显示的原理 软件盘的本质是什么?软键盘其实是一个Dialog! InputMethodService为我们的输入法创建了一个Dialog,并且将

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

Symfony2使用第三方库Upload制作图片上传实例详解_php实例

本文实例分析了Symfony2使用第三方库Upload制作图片上传的方法.分享给大家供大家参考,具体如下: 我们在应用程序或者网站的个人资料里一般都有设置头像的功能,这一章我们在Symfony2里用第三方的一个比较有名Upload库来制作上传图片的功能. 一.安装第三方库 1.在composer.json文件中的"require"中加入 "codeguy/upload": "*" 2.运行指令安装 composer update 二.编码 1.编

php多个文件及图片上传实例详解_php技巧

本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下

Symfony2安装第三方Bundles实例详解_php实例

本文实例讲述了Symfony2安装第三方Bundles的方法.分享给大家供大家参考,具体如下: 大多数的Bundles都提了安装的介绍,下面来介绍基本的安装步骤: 一.添加composer依赖关系 在symfony里,用composer来管理依赖关系 1.找到Bundle的包的名称 在包的README里一般都告诉了我们它的名称,如果没有,可以在https://packagist.org网站里搜索到 2.通过composer来安装Bundle 知道了bundle的包名之后,我们可以通过compos

Android WebView线性进度条实例详解

推荐阅读:Android Webview添加网页加载进度条实例详解 先给大家展示下效果图:这个效果图大家一看就懂,在生活经常见到 1.wevbview_progressbar.xml <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 背景 --> <item android:id="@android:id/background"&g

JSP中图片的上传与显示方法实例详解_JSP编程

本文实例讲述了JSP中图片的上传与显示方法.分享给大家供大家参考.具体如下: 1.引言 数据库应用程序,特别是基于WEB的数据库应用程序,常会涉及到图片信息的存储和显示.通常我们使用的方法是将所要显示的图片存在特定的目录下,在数据库中保存相应的图片的名称,在JSP中建立相应的数据源,利用数据库访问技术处理图片信息.但是,如果我们想动态的显示图片,上述方法就不能满足需要了.我们必须把图片存入数据库,然后通过编程动态地显示我们需要的图片.实际操作中,可以利用JSP的编程模式来实现图片的数据库存储和显

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

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