|
这篇文章是本人愿创，如要转载，请写明来自七色鸟设计---pc-king,谢谢!
图片随机显示是一个应用非常广泛的技巧。比如随机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)。
无需刷新页面可轮显广告条。
<!-- TWO STEPS TO INSTALL BANNER ROTATER:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var mfBanners = [
['http://www.banner1-url-here.com', 'http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif'],
['http://www.banner2-url-here.com', 'http://imageserv.imgis.com/images/Ad13189St1Sz1Sq5_Ban10.gif']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'"> <img border="0" src="'+mfBanners[mfBannerIndex][1]+'"></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 5000);
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<div id="banner" style="position:absolute; top:300; left:171;"></div>
<!-- Script Size: 1.74 KB -->
看看我的（一个国外网上用的，拷贝的呵呵。。。
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<SCRIPT language="javascript">
<!-- Image Selector
// Cameron Gregory - http://www.bloke.com/
// http://www.bloke.com/javascript/Random/
// This line and about must remain .. then you can use it for free...
//
// ChangeLog
//
//
// Fri Apr 30 12:40:50 EDT 1999
// Added target.
// Sat Sep 21 16:36:47 EDT 1996
// Added associate URL list.
//
// Fri Sep 13 18:36:20 EDT 1996
// Created from the base of Selector()
//
// Usage:
// RandomImage(images)
// RandomImageLong(images,iparams)
// RandomImageLink(images,urls)
// RandomImageLinkLongTarget(images,urls,iparams,hparams)
// images is space or comma separated file list
// urls is space or comma separated list of url's
// iparams params to add to <img>
// hparams params to add to <a href..>
function RandomImageLong(images,iparams)
{
/* si: start index
** i: current index
** ei: end index
** cc: current count
*/
si = 0;
ci=0;
cc=0;
imageSet = new Array();
ei = images.length;
for (i=1;i<ei;i++) {
if (images.charAt(i) == ' ' || images.charAt(i) == ',') {
imageSet[cc] = images.substring(si,i);
cc++;
si=i+1;
}
}
ind = Math.floor(Math.random() *cc);
document.write("<img "+iparams+" src="+imageSet[ind]+" alt=\""+imageSet[ind]+"\">");
}
function RandomImage(images)
{
RandomImageLong(images," ");
}
function RandomImageLinkLongTarget(images,urls,iparams,hparams)
{
/* si: start index
** i: current index
** ei: end index
** cc: current count
*/
imageSet = new Array();
urlSet = new Array();
si = 0;
ci=0;
cc=0;
ei = images.length;
for (i=1;i<ei;i++) {
if (images.charAt(i) == ' ' || images.charAt(i) == ',') {
imageSet[cc] = images.substring(si,i);
cc++;
si=i+1;
}
}
ind = Math.floor(Math.random() *cc);
si = 0;
ci=0;
cc=0;
ei = urls.length;
for (i=1;i<ei && cc <=ind ;i++) {
if (urls.charAt(i) == ' ' || urls.charAt(i) == ',') {
urlSet[cc] = urls.substring(si,i);
cc++;
si=i+1;
}
}
//document.write("<img "+iparams+" src="+imageSet[ind]+" alt=\""+imageSet[ind]+"\">");
document.write("<a "+hparams+" href=\""+urlSet[ind]+"\"><img "+iparams+" src="+imageSet[ind]+" alt=\""+imageSet[ind]+"\"></a>");
}
function RandomImageLinkLong(images,urls,iparams)
{
RandomImageLinkLongTarget(images,urls,iparams,"");
}
function RandomImageLink(images,urls)
{
RandomImageLinkLongTarget(images,urls,"border=0","");
}
// End Script -->
</SCRIPT>
<body bgcolor="#FFFFFF" text="#000000">
<SCRIPT>
<!---
RandomImageLong("image/button1.gif image/button2.gif image/corrner.gif image/P1.jpg image/P2.jpg");
// --->
</SCRIPT>
</body>
</html>
|
