用CSS的滤镜 和 JS 实现 的图片轮显，遗憾的是，IE以外的不少浏览器不支持Css的滤镜，代码不能使用。
1.Opacity
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
#pshow{margin:auto;width:139px;height:105px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
</style>
<script language="javascript" type="text/javascript">
/*ImageChange Start*/
var changeTime=2000,gradechangeTime=100,changeSpeed=10,imageCounter=2,nowImage,startOpacity;
var imageLink=new Array();
var filterObj,imageObj,changecontrol;
var urlLink=new Array();
imageLink[0]="http://t2.baidu.com/it/u=1222573540,2438663820&fm=3&gp=1.jpg";
imageLink[1]="http://t2.baidu.com/it/u=3707831711,1794311496&fm=0&gp=-36.jpg";
urlLink[0]="http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%C1%F5%B5%C2%BB%AA&in=19339&cl=2&cm=1&sc=0&lm=-1&pn=4&rn=1&di=993085601&ln=2000";
urlLink[1]="http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%C1%F5%B5%C2%BB%AA&in=22774&cl=2&cm=1&sc=0&lm=-1&pn=26&rn=1&di=2386256860&ln=2000";
function changeinit()
{
filterObj=document.getElementById("pshow");
imageObj=document.getElementById("img1");
linkObj=document.getElementById("a1");
if(document.all)startOpacity=filterObj.filters[0].Opacity;
nowImage=Math.floor(Math.random()*imageCounter);
imageObj.src=imageLink[nowImage];
linkObj.href=urlLink[nowImage];
changecontrol=setInterval("changeimg();",changeTime);
}
function changeimg()
{
if(document.all)
{
clearInterval(changecontrol);
gradedescopt();
}
else{imageObj.src=imageLink[nowImage];linkObj.href=urlLink[nowImage];}
nowImage==(imageCounter-1)? nowImage=0:nowImage++;
}
function gradeaddopt()
{
if(startOpacity<100)
{
startOpacity+=changeSpeed;
startOpacity>100? startOpacity=100:{};
filterObj.filters[0].Opacity=startOpacity;
setTimeout("gradeaddopt();",gradechangeTime);
}
else{changecontrol=setInterval("changeimg();",changeTime);return;}
}
function gradedescopt()
{
if(startOpacity>0)
{
startOpacity-=changeSpeed;
startOpacity<0? startOpacity=0:{};
filterObj.filters[0].Opacity=startOpacity;
setTimeout("gradedescopt();",gradechangeTime);
}
else
{
imageObj.src=imageLink[nowImage];
linkObj.href=urlLink[nowImage];
gradeaddopt();
return;
}
}
/*ImageChange End
-------------------------------------------------------------*/
</script>
</head>
<body onLoad="changeinit();">
<form id="form1" runat="server">
<div id="pshow" style=" border-style:none;"><a id="a1" href="" target="_top"><img id="img1" src="" width="625" height="213" style="border-style:none"/></a></div>
</form>
</body>
</html>
2.revealTrans
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FocusForIndex.aspx.cs" Inherits="SMBB2C.Web.FocusForIndex" %>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
#img1{margin:auto;width:139px;height:105px;FILTER: revealTrans(Duration=2, Transition=23);}
</style>
<script language="javascript" type="text/javascript">
/*ImageChange Start*/
var changeTime=2000,gradechangeTime=100,changeSpeed=10,transition=23,imageCounter=2,nowImage,startOpacity;
nowImage=Math.floor(Math.random()*imageCounter);
var imageLink=new Array();
var filterObj,imageObj,changecontrol;
var urlLink=new Array();
imageLink[0]="http://t2.baidu.com/it/u=1222573540,2438663820&fm=3&gp=1.jpg";
imageLink[1]="http://t2.baidu.com/it/u=3707831711,1794311496&fm=0&gp=-36.jpg";
urlLink[0]="http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%C1%F5%B5%C2%BB%AA&in=19339&cl=2&cm=1&sc=0&lm=-1&pn=4&rn=1&di=993085601&ln=2000";
urlLink[1]="http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%C1%F5%B5%C2%BB%AA&in=22774&cl=2&cm=1&sc=0&lm=-1&pn=26&rn=1&di=2386256860&ln=2000";
function change()
{
imageObj=document.getElementById("img1");
imageObj.filters.revealTrans.Transition=transition;
imageObj.filters[0].Apply();
imageObj.src=imageLink[nowImage];
linkObj=document.getElementById("a1");
linkObj.href=urlLink[nowImage];
nowImage==(imageCounter-1)? nowImage=0:nowImage++;
imageObj.filters[0].Play();
setTimeout("change()",5000)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="pshow" style=" border-style:none;"><a id="a1" href="" target="_top"><img id="img1" src="" style="border-style:none"/></a></div>
<script>
change();
</script>
</form>
</body>
</html>
