Dzwebs.Net

撰写电脑技术杂文十余年

JavaScript实现的网上图片轮播效果

Admin | 2008-2-27 22:36:25 | 被阅次数 | 14537

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

 分两部分:

        第一部分,即JavaScript部分,是一个文件,假设文件名为PicScroo1.js

        其内容是:

var adImg = new Array();
var adLink = new Array();
var cID = 0;
adImg[0] = "ImgFiles/ShowPC/1.jpg";
adLink[0] = "ImgFiles/ShowPC/1.jpg";
adImg[1] = "ImgFiles/ShowPC/2.jpg";
adLink[1] = "222";
adImg[2] = "ImgFiles/ShowPC/3.jpg";
adLink[2] = "333";
adImg[3] = "ImgFiles/ShowPC/4.jpg";
adLink[3] = "444";
adImg[4] = "ImgFiles/ShowPC/5.jpg";
adLink[4] = "555";
adImg[5] = "ImgFiles/ShowPC/6.jpg";
adLink[5] = "666";
var preImgs = new Array();
for(i=0;i<2;i++)
{  
    preImgs[i] = new Image();
    preImgs[i].src = adImg[i];
}
function NextAd()
{
    if(cID == 6)cID=0; //这里的6是图片的个数,和上面保持一致!
 if(document.all)
 {
 imgAD.filters.revealTrans.Transition=Math.floor(Math.random()*23);
 imgAD.filters.revealTrans.apply();
 imgAD.src = adImg[cID];
 imgAD.filters.revealTrans.play();
    cID++;
 setTimeout("NextAd()", 5000);
 }

function ShowLink()
{
   document.returnValue = true;
}
function Go2Url()
{
    window.open(adLink[cID-1]);
}

        第二部分是引入部分,首先在页面的Head区域使用如下代码引入:

<script language="javascript" src="DataFiles/Java/PicScroo1.js" type="text/javascript"></script>

        之后在页面的Body中使用如下的代码:

<a onMouseOver="javascript:ShowLink();return document.returnValue;" href="javascript:Go2Url();">
<img name="imgAD"
style="border:0px solid #cccccc; FILTER: revealTrans(duration=2,transition=20);" src="javascript:NextAd()" border="0" width="200" height="200" hspace="0"></a>


该杂文来自: 网页制作杂文

上一篇:通过JS复制网页表格及数据

下一篇:FrontPage操作技巧之数据库应用

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计