实现图片以淡出淡入效果

就是网页上实现像幻灯片的那种效果，希望图片能淡出淡入.希望个位高人提供点代码，JSP，ASP,都行谢谢一定会及时给分.

解决方案 »

  1.   

    <IMG style="FILTER: alpha(opacity=0)" src="http://www.youthfly.net/img/logo2.gif" border="1" name="u"> 
    <SCRIPT language=JavaScript>
    var b = 1;
    var c = true;
    function helpor_net(){ 
    if(document.all);
    if(c == true) { 
    b++;
    }
    if(b==100) { 
    b--;
    c = false
    }
    if(b==10) { 
    b++;
    c = true;
    }
    if(c == false) { 
    b--;
    }
    u.filters.alpha.opacity=0 + b;
    setTimeout("helpor_net()",50);
    }
    helpor_net();
    </SCRIPT>
      

  2.   

    第一步，将body改为<BODY bgcolor="#ffffff" onload="fade();">
    第二步，将下列代码插入body区中<SCRIPT language="JavaScript">var b = 1;
    var c = true;function fade(){
    if(document.all);if(c == true) {
    b++;
    }
    if(b==100) {
    b--;
    c = false
    }if(b==10) {
    b++;
    c = true;
    }if(c == false) {
    b--;
    }
    child.filters.alpha.opacity=0 + b;
    setTimeout("fade()",100);
    }
    </SCRIPT><IMG style="FILTER: alpha(opacity=0)" height="131" alt="Image" src="hhy2.jpg" width="170" name="child">
      

  3.   

    <IMG id="image1" src="images/main.jpg" style="visibility:hidden;FILTER:revealTrans(Duration=4.0,Transition=23)">
      

  4.   

    <style type="text/css">
    /* 数字按钮框样式 */
    #imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;}
    #imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; }
    #imgTitle_down {left:0px;text-align: right; width:inherit; }
    /* 图片框样式 */
    .imgClass {border: 1px solid #000;}
    /* 图片文字框样式 */
    #txtFrom {text-align: center;vertical-align: middle;}
    /* 数字按钮样式 */
    .button {text-decoration: none;padding: 2px 7px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;}
    a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;}
    a.button:hover {font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; }
    .buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;}
    /*渐变*/ 
    .trans { width:90px; background-color:#000;filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);}
    </style>
    <script language="javascript" type="text/javascript">
    var imgWidth=260;              //图片宽
    var imgHeight=195;             //图片高
    var textFromHeight=2;         //焦点字框高度 (单位为px)
    var textStyle="f12";           //焦点字class style (不是连接class)
    var textLinkStyle="p1"; //焦点字连接class style
    var buttonLineOn="#f60";           //button下划线on的颜色
    var buttonLineOff="#000";          //button下划线off的颜色
    var TimeOut=5000;              //每张图切换时间 (单位毫秒);
    var imgUrl=new Array(); 
    var imgLink=new Array();
    var imgtext=new Array();
    var imgAlt=new Array();
    var adNum=0;
    //焦点字框高度样式表 开始
    document.write('<style type="text/css">');
    document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
    document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');
    document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+16)+'px;height:18px}');
    document.write('</style>');
    document.write('<div id="focuseFrom">');
    //焦点字框高度样式表 结束
    imgUrl[1]='http://www.pconline.com.cn/mobile/guide/time/images/picpath/0818_buy_shuihuo260.jpg';
    imgtext[1]='<A HREF="http://www.pconline.com.cn/mobile/guide/time/0608/848609.html" TARGET="_blank" class="'+textLinkStyle+'">价格性能一个都不能少!经典超值水货机火爆</A>';
    imgLink[1]='http://www.pconline.com.cn/mobile/guide/time/0608/848609.html';
    imgAlt[1]='价格性能一个都不能少!经典超值水货机火爆';
    imgUrl[2]='http://www.pconline.com.cn/mobile/review/images/picpath/0818_pc_lenovo_p706_260.jpg';
    imgtext[2]='<A HREF="http://www.pconline.com.cn/mobile/review/0608/850937.html" TARGET="_blank" class="'+textLinkStyle+'">精钢打造精品!国产音乐直板强机联想P706评</A>';
    imgLink[2]='http://www.pconline.com.cn/mobile/review/0608/850937.html';
    imgAlt[2]='精钢打造精品!国产音乐直板强机联想P706评';
    imgUrl[3]='http://www.pconline.com.cn/coolshow/new/mobile/images/picpath/0818_cs_shayu_260.jpg';
    imgtext[3]='<A HREF="http://www.pconline.com.cn/coolshow/new/mobile/0608/850410.html" TARGET="_blank" class="'+textLinkStyle+'">太平洋群鲨惊现!爱立信经典三防R310典藏图</A>';
    imgLink[3]='http://www.pconline.com.cn/coolshow/new/mobile/0608/850410.html';
    imgAlt[3]='太平洋群鲨惊现!爱立信经典三防R310典藏图';imgUrl[4]='http://www.pconline.com.cn/mobile/photo/images/picpath/260x195_focusx828.jpg';
    imgtext[4]='<A HREF="http://adv.pconline.com.cn/adpuba/click?adid=24357&id=pc.sjtx.jdtp.&" TARGET="_blank" class="'+textLinkStyle+'">三星全球至薄!6.9mm新鲜铂锐X828魅力诱惑</A>';
    imgLink[4]='http://adv.pconline.com.cn/adpuba/click?adid=24357&id=pc.sjtx.jdtp.&';
    imgAlt[4]='三星全球至薄!6.9mm新鲜铂锐X828魅力诱惑';imgUrl[5]='http://www.pconline.com.cn/coolshow/new/mobile/images/picpath/0818_cs_w208_260.jpg';
    imgtext[5]='<A HREF="http://www.pconline.com.cn/coolshow/new/mobile/0608/850515.html" TARGET="_blank" class="'+textLinkStyle+'">小巧灵动 简约实用!MOTO直板新秀W208图赏</A>';
    imgLink[5]='http://www.pconline.com.cn/coolshow/new/mobile/0608/850515.html';
    imgAlt[5]='小巧灵动 简约实用!MOTO直板新秀W208图赏';function changeimg(n)
    {
    adNum=n;
    window.clearInterval(theTimer);
    adNum=adNum-1;
    nextAd();
    }
    function goUrl(){
    window.open(imgLink[adNum],'_blank');
    }
    //NetScape开始
    if (navigator.appName == "Netscape")
    {
    document.write('<style type="text/css">');
    document.write('.buttonDiv{height:4px;width:21px;}');
    document.write('</style>');
    function nextAd(){
    if(adNum<(imgUrl.length-1))adNum++;
    else adNum=1;
    theTimer=setTimeout("nextAd()", TimeOut);
    document.images.imgInit.src=imgUrl[adNum];
    document.images.imgInit.alt=imgAlt[adNum];
        document.getElementById('focustext').innerHTML=imgtext[adNum];
    document.getElementById('link'+adNum).style.background=buttonLineOn;
    document.getElementById('imgLink').href=imgLink[adNum];
    for (var i=1;i<=imgUrl.length;i++)
    {
       if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
    }
    }
    document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="linkwhite"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>')
    document.write('<div id="imgTitle">');
    document.write('<div id="imgTitle_down">');
    //数字按钮代码开始
    for(var i=1;i<imgUrl.length;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}
    //数字按钮代码结束
    document.write('</div>');
    document.write('</div>');
    document.write('</div>');
    nextAd();
    }
    //NetScape结束
    //IE开始
    else
    {
    var count=0;
    for (i=1;i<imgUrl.length;i++) {
    if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
    count++;
    } else {
    break;
    }
    }
    function playTran(){
    if (document.all)
    imgInit.filters.revealTrans.play();
    }
    var key=0;
    function nextAd(){
    if(adNum<count)adNum++ ;
    else adNum=1;

    if( key==0 ){
    key=1;
    } else if (document.all){
    imgInit.filters.revealTrans.Transition=6;
    imgInit.filters.revealTrans.apply();
                       playTran();
        }
    document.images.imgInit.src=imgUrl[adNum];
    document.images.imgInit.alt=imgAlt[adNum];
    document.getElementById('link'+adNum).style.background=buttonLineOn;
    for (var i=1;i<=count;i++)
    {
       if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
    }
        focustext.innerHTML=imgtext[adNum];
    theTimer=setTimeout("nextAd()", TimeOut);
    }
    document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a>');
    document.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>');
    document.write('<div id="imgTitle">');
    document.write(' <div id="imgTitle_down"> <a class="trans"></a>');
    //数字按钮代码开始
    for(var i=1;i<imgUrl.length;i++){document.write('<a id="link'+i+'"  href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');}
    //数字按钮代码结束
    document.write('</div>');
    document.write('</div>');
    document.write('</div>');
    }
    //IE结束
    </script>这个是太平洋上的,你看是不是这样子.若你要下面没有那些数字的,我也有一个.是就说一下.我再发上来.
      

  5.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <body>
    <table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><div id=oTransContainer 
                style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 165px; HEIGHT: 103px"><a 
                href="http://www.makewing.com" 
                target=_blank><img class=pic id=oDIV1 
                style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid" 
                height=150 src="images/01.jpg" 
                width=778 border=0>
                <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()', 2000);return;}else{oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}} setTimeout('fnToggle()', 6000);}fnToggle();</script>
        </a><a 
                href="http://www.makewing.com" 
                target=_blank><img class=pic id=oDIV2 
                style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid" 
                height=150 src="images/02.jpg" 
                width=778 border=0></a><a 
                href="http://www.makewing.com" 
                target=_blank><img class=pic id=oDIV3 
                style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid" 
                height=150 src="images/03.jpg" 
                width=778 border=0></a><a 
                href="http://www.makewing.com" 
                target=_blank><img class=pic id=oDIV4 
                style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid" 
                height=150 src="images/04.jpg" 
                width=778 border=0></a><a 
                href="http://www.makewing.com" 
                target=_blank><img class=pic id=oDIV5 
                style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid" 
                height=150 src="images/05.jpg" 
                width=778 border=0></a></div></td>
      </tr>
    </table>
    </body>
    </html>
    你把里面的图片地址换成你要的图片就行了.