javascript图片变化的效果,也算是今天学到的一点小知识
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 无标题文档 </ title >
</ head >
< script language ="javascript" > ...
var numAD=0;
var imgAD = new Array();//存储图片的src地址为数组。
imgAD[0] = "images/1.jpg";
imgAD[1] = "images/2.jpg";
imgAD[2] = "images/3.jpg";
imgAD[3] = "images/4.jpg";
imgAD[4] = "images/5.jpg";
var dotime=5000;
function setTransition()...{
if(document.all)...{
u.filters.revealTrans.Transition=23;//Math.floor(Math.random()*23);
u.filters.revealTrans.Duration=4;
u.filters.revealTrans.apply();
}
}
function playTransition()...{
if(document.all)...{
u.filters.revealTrans.play();
}
}
function nextAD()...{
setTransition();
document.u.src=imgAD[numAD];
playTransition();
if(numAD >= imgAD.length-1)...{
numAD=0;
}else...{
numAD++;
}
window.setTimeout("nextAD()",dotime);
}
function ad_clok(v)
...{
this.numAD=v-1;
this.dotime=20000;
nextAD();
}
</ script >
< body onload ="nextAD()" >
< div id ="" style ="width:200px;" >
< img src ="images/1.jpg" width ="200" height ="200" border ="0" name ="u" id ="u" style ="FILTER: revealTrans(duration=4,transition=20)" />
< div id ="" style ="width:100%" >< a href ="javascript:ad_clok(1)" > 1 </ a > < a href ="javascript:ad_clok(2)" > 2 </ a > < a href ="javascript:ad_clok(3)" > 3 </ a > < a href ="javascript:ad_clok(4)" > 4 </ a >
</ div >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 无标题文档 </ title >
</ head >
< script language ="javascript" > ...
var numAD=0;
var imgAD = new Array();//存储图片的src地址为数组。
imgAD[0] = "images/1.jpg";
imgAD[1] = "images/2.jpg";
imgAD[2] = "images/3.jpg";
imgAD[3] = "images/4.jpg";
imgAD[4] = "images/5.jpg";
var dotime=5000;
function setTransition()...{
if(document.all)...{
u.filters.revealTrans.Transition=23;//Math.floor(Math.random()*23);
u.filters.revealTrans.Duration=4;
u.filters.revealTrans.apply();
}
}
function playTransition()...{
if(document.all)...{
u.filters.revealTrans.play();
}
}
function nextAD()...{
setTransition();
document.u.src=imgAD[numAD];
playTransition();
if(numAD >= imgAD.length-1)...{
numAD=0;
}else...{
numAD++;
}
window.setTimeout("nextAD()",dotime);
}
function ad_clok(v)
...{
this.numAD=v-1;
this.dotime=20000;
nextAD();
}
</ script >
< body onload ="nextAD()" >
< div id ="" style ="width:200px;" >
< img src ="images/1.jpg" width ="200" height ="200" border ="0" name ="u" id ="u" style ="FILTER: revealTrans(duration=4,transition=20)" />
< div id ="" style ="width:100%" >< a href ="javascript:ad_clok(1)" > 1 </ a > < a href ="javascript:ad_clok(2)" > 2 </ a > < a href ="javascript:ad_clok(3)" > 3 </ a > < a href ="javascript:ad_clok(4)" > 4 </ a >
</ div >
</ div >
</ body >
</ html >
现在很多网站都有这种作为图片新闻展示的js效果了,不是什么新东西。这里面包含的主要两个东西就是:对css滤镜的使用和js的setTimeout()函数。不过呢后来发现一个问题,当通过下面的1,2,3,4连接来显示图片的时候图片变换非常快根本没达到设定的20秒,貌似window.setTimeout("nextAD()",dotime);里面的dotime失效了没气作用,困扰了我很久,希望达人恩解答哦,再见!