幻灯片图片轮显滤镜 js revealTrans Opacity

用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;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;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>

幻灯片 图片轮显 滤镜 js revealTrans Opacity

幻灯片图片轮显滤镜 js revealTrans Opacity