图片切换-CSS滤镜revealTrans的应用

来源：互联网发布：查域名信息编辑：程序博客网时间：2024/04/29 07:58

第一种方法:

<A href="javascript:goUrl2()"><IMG class=img01
                  style="BORDER-LEFT-COLOR: black; FILTER: revealTrans(duration=2,transition=10); BORDER-BOTTOM-COLOR: black; COLOR: #000000; BORDER-TOP-COLOR: black; BORDER-RIGHT-COLOR: black"
                  height=150 src="" width=247 border=0 name=imgInit2></A>
                  <DIV></DIV>
                  <SCRIPT language=JavaScript>var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
imgUrl[1]="http://www.cts2008.com/Files/upfile/20060629161104.jpg";imgLink[1]="3.html";imgUrl[2]="http://www.cts2008.com/Files/upfile/20060629161758.jpg";imgLink[2]="3.html";imgUrl[3]="http://www.cts2008.com/Files/upfile/20060629162712.jpg";imgLink[3]="3.html";imgUrl[4]="http://www.cts2008.com/Files/upfile/20060629163111.jpg";imgLink[4]="3.html";

第二种方法:

<TABLE cellSpacing=0 cellPadding=0 width=244 align=center
                  border=0>
                    <TBODY>
                    <TR>
                      <TD id=alltd style="DISPLAY: none" vAlign=center
                      align=middle>
                        <TABLE cellSpacing=1 cellPadding=0 align=center>
                          <TBODY>
                          <TR>
                            <TD align=middle><IMG id=artImg
                              style="VISIBILITY: hidden" height=178
                              src="1.jpg"
                              width=244 align=center border=1
                              masterid="10831"> </TD></TR>
                          <TR>
                            <TD align=middle>
                              <DIV id=titlediv style="VISIBILITY: hidden">黎巴嫩儿童遇难以军对黎巴嫩南部村庄加纳的<br />
                              空袭已经导致56名平民遇难，其中包括34名儿童</DIV></TD></TR></TBODY></TABLE></TD>
                      <TD id=alltd style="DISPLAY: none" vAlign=center
                      align=middle>
                        <TABLE cellSpacing=1 cellPadding=0 align=center>
                          <TBODY>
                          <TR>
                            <TD align=middle><IMG id=artImg
                              style="VISIBILITY: hidden" height=178
                              src="2.jpg"
                              width=244 align=center border=1
                              masterid="10831"> </TD></TR>
                          <TR>
                            <TD align=middle>
                              <DIV id=titlediv style="VISIBILITY: hidden">         黎巴嫩电厂原油泄漏大量原油从被以色列空袭<br />
                              摧毁的南部发电厂流入地中海，造成环境污染</DIV></TD></TR></TBODY></TABLE></TD>
                      <TD id=alltd style="DISPLAY: none" vAlign=center
                      align=middle>
                        <TABLE cellSpacing=1 cellPadding=0 align=center>
                          <TBODY>
                          <TR>
                            <TD align=middle><A
                              href="http://www.sznews.com/news/node_10831.htm"
                              target=_blank><IMG id=artImg
                              style="VISIBILITY: hidden" height=178
                              src="3.jpg"
                              width=244 align=center border=1
                              masterid="10831"></A> </TD></TR>
                          <TR>
                            <TD align=middle>
                              <DIV id=titlediv style="VISIBILITY: hidden">北京持续数天阴雨大雾由于冷空气与暖湿气流<br />
                              频繁相遇，大量水汽囤积在空中形成雾气</DIV></TD></TR></TBODY></TABLE></TD>
                      <TD id=alltd style="DISPLAY: none" vAlign=center
                      align=middle>
                        <TABLE cellSpacing=1 cellPadding=0 align=center>
                          <TBODY>
                          <TR>
                            <TD align=middle><A
                              href="http://www.sznews.com/news/node_10831.htm"
                              target=_blank><IMG id=artImg
                              style="VISIBILITY: hidden" height=178
                              src="4.jpg"
                              width=244 align=center border=1
                              masterid="10831"></A> </TD></TR>
                          <TR>
                            <TD align=middle>
                              <DIV id=titlediv style="VISIBILITY: hidden">黄河壶口瀑布迎来洪峰受上游连续的降雨影响<br />
                              黄河壶口瀑布迎来了今年的第一个洪峰</DIV></TD></TR></TBODY></TABLE></TD>
                      </TR></TBODY></TABLE>


         <SCRIPT language=javascript type=text/javascript>
<!--
var currImg = 0;
var ImgList = document.all("artImg");
var titleList = document.all("titlediv");
var tdList = document.all("alltd");
var first = 0;
function playimg(){
if(first!=0)
hidimg(currImg);
if(currImg>=(ImgList.length-1)){
    currImg = 0;
}
    else {
       currImg = currImg+1;
   }
showimg(currImg);
first =1;
setTimeout("playimg()",2000);
}

    for(i=0;i<ImgList.length;i++)
    {
            imgobj = ImgList.item(i);
            imgobj.style.filter="revealTrans(Duration=4.0, Transition=23)";
            imgobj.style.visibility="hidden";
    }
    playimg();

}
initimg();

-->
</SCRIPT>