不使用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中效果的随机转换,否则只是固定使用某一种转换方式,哪位知道原因的请赐教