主题:  CSS+JS实现图片的动态转换

盛装五步

职务:普通成员
等级:3
金币:12.0
发贴:731
#12004/9/26 11:21:12
不使用flash而实现图像的动态转换,这也是很多网站常用的效果,如果不考虑浏览器的问题(转换滤镜基本都需再IE5.5+才能看到效果,否则表现为简单的图像切换),也算是不错的表现方式
>>>不同滤镜的效果点这里查看

完整代码如下,只需改动几个地方就可以完全实现自定义:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS滤镜与JS实现图片动态转换的实例</title>
<style type="text/css">
A:link,A:visited,A:active{color:#993300;font-size:14px}
a:hover{color:#000000; font-size:14px}
</style>
</head>

<body>
<TABLE BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
        
        <TR>
          <TD><table height="26" border="0" align="center" cellpadding="0" cellspacing="3">
              <tr> 
                <td width="14" valign="top"><img src="v3.gif" width="14" height="14"></td>
                <td valign="bottom" id="title"></td>
              </tr>
            </table></TD>
        </TR>
        <TR> 
          <TD height="167"> <table border="8" bordercolor="#FF9933" cellspacing="0" cellpadding="0">
              <tr> 
                <td>
                  <script language=JavaScript>

var imgUrl=new Array();
var imgLink=new Array();
var imgTz=new Array();
var adNum=0;
imgUrl[1]="01s.jpg";<!-- 图片地址 -->
imgLink[1]="01.jpg";<!-- 图片链接 -->
imgTz[1]="<a href='01.jpg' target='_blank'>《街头霸王》官方漫画封面大赏01</a>";<!-- 图片说明及链接 -->
imgUrl[2]="02s.jpg";
imgLink[2]="02.jpg";
imgTz[2]="<a href='02.jpg' target='_blank'>《街头霸王》官方漫画封面大赏02</a>";
imgUrl[3]="03s.jpg";
imgLink[3]="03.jpg";
imgTz[3]="<a href='03.jpg' target='_blank'>《街头霸王》官方漫画封面大赏03</a>";
imgUrl[4]="04s.jpg";
imgLink[4]="04.jpg";
imgTz[4]="<a href='04.jpg' target='_blank'>《街头霸王》官方漫画封面大赏04</a>";
imgUrl[5]="05s.jpg";
imgLink[5]="05.jpg";
imgTz[5]="<a href='05.jpg' target='_blank'>《街头霸王》官方漫画封面大赏05</a>";

var imgPre=new Array();
var j=0;
for (i=1;i<=5;i++) {<!-- 共有n张图片请将i<=5改成i<=n -->
	if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
		j++;
	} else {
		break;
	}
}

function playTran(){
	if (document.all)
		imgInit.filters[0].play();
}

var key=0;
function nextAd(){
	if(adNum<j)adNum++ ;
	else adNum=1;
	
	if( key==0 ){
		key=1;
	} else if (document.all){
		imgInit.filters[0].Transition=23;<!-- 非必要,如使用RevealTrans滤镜清添加此句以实现24种效果的随机切换 -->
		imgInit.filters[0].apply();
		playTran();
	}
	document.images.imgInit.src=imgUrl[adNum];
         document.getElementById('title').innerHTML=imgTz[adNum]; 
	
	theTimer=setTimeout("nextAd()", 3000);<!-- 此处指定每张图片的持续显示时间 -->
}


function goUrl(){
	jumpUrl=imgLink[adNum];
	jumpTarget='_blank';
	if (jumpUrl != ''){
		if (jumpTarget != '') 
			window.open(jumpUrl,jumpTarget);
		else
			location.href=jumpUrl;
	}
}
</script>
        <a href="javascript:goUrl()"><img src="javascript:nextAd()"  alt=点击放大  name=imgInit border="0" style="FILTER:revealTrans(duration=2,transition=21)"></a></td><!-- filter可以指定滤镜和相应的参数 -->
              </tr>
          </table></TD>
        </TR>
</TABLE>
</body>
</html>


这个例子使用的是revealTrans滤镜,也可以自行修改使用其他滤镜,不过我发现必须添加
imgInit.filters[0].Transition=23

才能实现revealTrans滤镜24中效果的随机转换,否则只是固定使用某一种转换方式,哪位知道原因的请赐教



我佛山人

职务:版主
等级:4
金币:16.0
发贴:2269
#22004/9/26 17:55:18
以前写的东西,参考一下:

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



盛装五步

职务:普通成员
等级:3
金币:12.0
发贴:731
#32004/9/26 20:02:52
原来23就是指定随机,我一直以为RevealTrans滤镜有24种效果,23也是其中一种,多谢斑竹