求：图片的渐出效果


<style>
.a1{ FILTER: alpha(opacity=100); width:100%; height:100%}
.a2{ FILTER: alpha(opacity=90); width:80%; height:80%}
.a3{ FILTER: alpha(opacity=80); width:70%; height:70%}
.a4{ FILTER: alpha(opacity=70); width:60%; height:60%}
.a5{ FILTER: alpha(opacity=60); width:50%; height:50%}
.a6{ FILTER: alpha(opacity=50); width:40%; height:40%}
.a7{ FILTER: alpha(opacity=40); width:30%; height:30%}
.a8{ FILTER: alpha(opacity=30); width:20%; height:20%}
.a9{FILTER: alpha(opacity=20); width:10%; height:10%}
.a10{ FILTER: alpha(opacity=0); width:0; height:0}</style>
<body>
<div id="fu">
<div  style="POSITION: relative; width:460px; height:100px" id="banner" >
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style=" POSITION: absolute;  DISPLAY: none "   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a></div></div>
<a href="#" onClick="(fu.style.display=='none')?fu.style.display='block':fu.style.display='none';" >隐藏或显示</a>
</body><script>
var banner=document.getElementById("banner");//获得父容器
var img=banner.getElementsByTagName("IMG");//得到容器下的IMG
var i=0;//标记当前展示的IMG
displayFlag=true;//标记最外层容器是否被隐藏
function checkDisplay(obj){//循环banner的父元素，有任意一层隐藏则退出方法
while(obj.parentNode.tagName!="BODY"){
obj=obj.parentNode;
if(obj.style!=null)
if(obj.offsetWidth==0||obj.style.display=="none"||obj.style.visibility=="hidden"){
var imagesss=document.getElementById("banner").getElementsByTagName("IMG");

for(var fr=0;fr<imagesss.length;fr++){
imagesss[fr].style.visibility="hidden";
}
return displayFlag=false;
}
else
return displayFlag=true;
}
}
function change(){
img=banner.getElementsByTagName("IMG");//得到容器下的IMG
c=1;//定义className
var t=null;//定义计时器
t=setInterval(function(){
checkDisplay(banner);//运行前先判断一次是否被隐藏
if(c==10||!displayFlag)//一次循环结束，或者被隐藏了，则清空计时器
{
return clearInterval(t);//同时退出方法
}
if(c!=9)//目前只10个样式，循环到9则结束
{
img[i].className="a"+c;//定义新的CLASSNAME
img[i].style.display='inline';//把图片定义为显示状态
img[i].style.visibility='visible';
img[i].style.left=banner.offsetWidth - img[i].offsetWidth;//将图片居右
}
else{
img[i].style.left=0;//此时要隐藏图片，先将图片居左
img[i].className="a1";//再还原CLASSNAME
img[i].style.display="none";//最后隐藏
img[i].style.visibility='hidden';
}
if(i==img.length-1){//当图片循环到最后一张时的处理
img[0].style.left=0;
img[0].style.display="inline";//控制第1个图片显示
img[0].style.visibility='visible';
img[0].className="a"+(10-c);//定义第1个图片的CLASSNAME
}
else{
//否则改变i的下一张图片
img[i+1].style.left=0;
img[i+1].style.display="inline";
img[i+1].style.visibility='visible';
img[i+1].className="a"+(10-c);
}c++;//样式标记},100);//0。1秒变动一次
i++;
if(i>=img.length){//循环到最后一张则将i归0
i=0;
}
}
change();
var tw=setInterval(change,2000);//计时器</script>
<!--图片变换效果结束-->
曾经无聊的时候写的一段。LZ看看。
 把图片的链接改一下就成。

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta content="模板无忧" name="keywords" />
    <style type="text/css">
    body{text-align:center;}
    </style>
    </head><body>
    <SCRIPT>
    var NowFrame = 1;
    var MaxFrame = 5;
    var bStart = 0;
    function fnToggle() {
    var next = NowFrame + 1;
    if(next == MaxFrame+1) 
    {
    NowFrame = MaxFrame;
    next = 1;
    }
    if(bStart == 0)
    {
    bStart = 1;
      
    setTimeout('fnToggle()', 1000);
    return;
    }
    else
    {
    oTransContainer.filters[0].Apply();
    document.images['oDIV'+next].style.display = "";
    document.images['oDIV'+NowFrame].style.display = "none"; 
    oTransContainer.filters[0].Play(duration=5);
    if(NowFrame == MaxFrame) 
    NowFrame = 1;
    else
    NowFrame++;
    } setTimeout('fnToggle()', 6000);
    }
    fnToggle();
    </SCRIPT>
    <!--焦点图片开始-->
    <DIV id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion='forward'); WIDTH: 243px; HEIGHT: 235px">
    <A href="#" target=_blank><IMG id=oDIV1 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; DISPLAY: yes;  BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid" height=235 src="../images/6-4-1.JPG" width=243 border=0></A>
    <A href="#" target=_blank><IMG id=oDIV2 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; DISPLAY: none; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid" height=235 src="../images/6-4-2.jpg" width=243 border=0></A>
    <A href="#" target=_blank><IMG id=oDIV3 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; DISPLAY: none; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid" height=235 src="../images/6-4-3.jpg" width=243 border=0></A>
    <A href="#" target=_blank><IMG id=oDIV4 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; DISPLAY: none; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid" height=235 src="../images/6-4-4.jpg" width=243 border=0></A>
    <A href="#" target=_blank><IMG id=oDIV5 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; DISPLAY: none; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid" height=235 src="../images/6-4-5.jpg" width=243 border=0></A>
    </DIV>
    </body>
    </html>
      

  2.   

    刚做的, 供参考
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
    Object.extend = function(destination, source) {
      for (var property in source)
    destination[property] = source[property];
      return destination;
    }
    var ie = document.attachEvent || 0;
    var Element = {
    setOpacity: function(val){
    if(ie){
    this.style.filter = 'alpha(opacity='+val+')';
    }else{
    this.style.opacity = parseFloat(val/100);
    }
    },
    getOpacity: function(){
     return this.currentStyle?this.currentStyle.filter.replace(/^.+?=\d+?.+$/i,'$1'):window.getComputedStyle(this,null).opacity;
    }
    } function sm(obj){
    var img = new Image;
    img.src= obj.src;
    var w = img.width, h = img.height, ww= 10, hh = 10, op = 0;
    var t = setInterval(
    function(){
    ww += (w-ww)*0.3;
    hh += (h-hh)*0.3;
    op += (100-obj.getOpacity())*0.3;
    obj.style.width = ww+'px';
    obj.style.height = hh+'px';
    obj.setOpacity(op);
    if(ww>w-1){
    clearInterval(t);
    obj.style.width = w+'px';
    obj.style.height = h+'px';
    obj.setOpacity(100);
    }
    },20);
    }
    onload = function(){
    sm(Object.extend(document.getElementById('test'), Element));
    }
    </script>
    </head>
    <body>
    <img id="test" src="http://i1.sinaimg.cn/cj/money/bank/bank_hydt/20090109/U2871P31T1D5737111F46DT20090109080123.jpg" style="width:10px; height:10px; filter:alpha(opacity=0); opacity:0" />
    </body>
    </html>
      

  3.   

    上个正则有点问题,更正一下<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
    Object.extend = function(destination, source) {
      for (var property in source)
    destination[property] = source[property];
      return destination;
    }
    var ie = document.attachEvent || 0;
    var Element = {
    setOpacity: function(val){
    if(ie){
    this.style.filter = 'alpha(opacity='+val+')';
    }else{
    this.style.opacity = parseFloat(val/100);
    }
    },
    getOpacity: function(){
     return this.currentStyle?this.currentStyle.filter.replace(/^.+?=(\d+)?.+$/i,'$1'):window.getComputedStyle(this,null).opacity;
    }
    } function sm(obj){
    var img = new Image;
    img.src= obj.src;
    var w = img.width, h = img.height, ww= 10, hh = 10, op = 0;
    var t = setInterval(
    function(){
    ww += (w-ww)*0.5;
    hh += (h-hh)*0.5;
    op += (100-obj.getOpacity())*0.2;
    obj.style.width = ww+'px';
    obj.style.height = hh+'px';
    obj.setOpacity(op);
    if(ww>w-1){
    status = op;
    clearInterval(t);
    obj.style.width = w+'px';
    obj.style.height = h+'px';
    obj.setOpacity(100);
    }
    },10);
    }
    onload = function(){
    var img = Object.extend(document.getElementById('test'), Element);
    sm(img);
    }
    </script>
    </head>
    <body>
    <img id="test" src="http://i1.sinaimg.cn/cj/money/bank/bank_hydt/20090109/U2871P31T1D5737111F46DT20090109080123.jpg" style="width:10px; height:10px; filter:alpha(opacity=0); opacity:0" />
    </body>
    </html>