求多幅图片由小到大淡入,再由大到小淡出切换显示代码,不胜感激!!

如果你了解Prototype.js的话，这应该非常简单在Prototype中，可以使用Element.setOpacity设置当前元素的透明度，并且在多种浏览器中都能很好的运行。 
Element.setOpacity接受一个浮点数参数，范围为从0到1，其中0表示完全透明，1表示完全不透明。 

解决方案 »

  1.   

    直接用LightBox就好了，GOOGLE一下，很多的
      

  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=utf-8" />
    <title>图片效果</title>
    </head><body><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:100px; 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();
    setInterval(change,2000);//计时器</script>
    <!--图片变换效果结束-->
    </body>
    </html>
    当年做过。LZ是不是要这个效果？
      

  3.   

    googlejQuery animate css