페이드 효과 및 로테이션

출처 : http://ziwoo.net/zb/view.php?uid=138&startPage=1&boardid=zb_ziwoo_javascript

// Fade Effect

// Licence : GPL (http://www.gnu.org/licenses/licenses.html#GPL)

// Update & Download  : http://www.ziwoo.net/zb/view.php?boardid=zb_ziwoo_javascript&uid=138

// This page was last modified on 2011.11.10

 

<script language="JavaScript">

<!--

// 메인배너 효과주기

var fadeObj = 1;

var overStaus = "no";

var MSIE = 0;

if(navigator.appName == "Microsoft Internet Explorer") MSIE = 1;

 

function fadeIn(){

       if(MSIE){

             if(document.getElementById("mBannerDiv"+fadeObj).filters.alpha.opacity>=100){

                    document.getElementById("mBannerBg").style.backgroundImage = "url("+document.getElementById("mBannerDiv"+fadeObj).firstChild.firstChild.src+")";

                    return;

             }     

             document.getElementById("mBannerDiv"+fadeObj).filters.alpha.opacity += 2;

       }else{

             if(document.getElementById("mBannerDiv"+fadeObj).style.opacity>=1){

                    document.getElementById("mBannerBg").style.backgroundImage = "url("+document.getElementById("mBannerDiv"+fadeObj).childNodes[1].childNodes[0].src+")";

                    return;

             }     

             document.getElementById("mBannerDiv"+fadeObj).style.opacity = parseFloat(document.getElementById("mBannerDiv"+fadeObj).style.opacity,10)+0.01;

       }

       setTimeout('fadeIn()',1);

}

 

function mTab(n){

       for(var i=1;i<=6;i++){

             document.getElementById("mBanner"+i).src = document.getElementById("mBanner"+i).src.replace("_over.gif",".gif");

             document.getElementById("mBannerDiv"+i).style.display = "none";

             if(MSIE) document.getElementById("mBannerDiv"+i).filters.alpha.opacity = 0;

             else document.getElementById("mBannerDiv"+i).style.opacity = 0;

       }

       document.getElementById("mBanner"+n).src = document.getElementById("mBanner"+n).src.replace(".gif","_over.gif");

       fadeObj = n;

       document.getElementById("mBannerDiv"+fadeObj).style.display = "block";

       setTimeout('fadeIn()',100);

}

 

function beatBox(){

       if(overStaus=="no"){

             var num = (fadeObj==6)?1:fadeObj+1;

             mTab(num);

       }

}

 

timeId = setInterval('beatBox()',5000); //시간조절

//-->

</script>

 

<table width='' border='0' cellpadding='0' cellspacing='0'class='default' onmouseOver="overStaus='yes';" onmouseOut="overStaus='no';" style="border:5px solid #FFFFFF">

       <tr>

             <td width='203' bgcolor='#274d84' align='center'>

                    <table border="0" cellpadding="0" cellspacing="0" width="178">

                           <tr>

                                 <td><a href="javascript:alert('1번링크로이동')" onFocus="this.blur();"><img id="mBanner1" onMouseOver="mTab(1)" src='http://www.ziwoo.net/fade_img/main_bn_data_over.gif' border='0'></a></td>

                           </tr>

                           <tr>

                                 <td><a href="javascript:alert('2번링크로이동')" onFocus="this.blur();"><img id="mBanner2" onMouseOver="mTab(2)" src='http://www.ziwoo.net/fade_img/main_bn_report.gif' border='0'></a></td>

                           </tr>

                           <tr>

                                 <td><a href="javascript:alert('3번링크로이동')" onFocus="this.blur();"><img id="mBanner3" onMouseOver="mTab(3)" src='http://www.ziwoo.net/fade_img/main_bn_con.gif' border='0'></a></td>

                           </tr>

                           <tr>

                                 <td><a href="javascript:alert('4번링크로이동')" onFocus="this.blur();"><img id="mBanner4" onMouseOver="mTab(4)" src='http://www.ziwoo.net/fade_img/main_bn_rever.gif' border='0'></a></td>

                           </tr>

                           <tr>

                                 <td><a href="javascript:alert('5번링크로이동')" onFocus="this.blur();"><img id="mBanner5" onMouseOver="mTab(5)" src='http://www.ziwoo.net/fade_img/main_bn_patent.gif' border='0'></a></td>

                           </tr>

                           <tr>

                                 <td><a href="javascript:alert('6번링크로이동')" onFocus="this.blur();"><img id="mBanner6" onMouseOver="mTab(6)" src='http://www.ziwoo.net/fade_img/main_bn_premium.gif' border='0'></a></td>

                           </tr>

                    </table>

             </td>

             <td id="mBannerBg" background="http://www.ziwoo.net/fade_img/bn_main_img1.jpg">

                    <div id="mBannerDiv1" style="display:block; opacity=1; filter:alpha(opacity=100); width:400px; height:251px;" border='0' cellpadding='0' cellspacing='0'>

                           <a href="javascript:alert('1번링크로이동')"><img src='http://www.ziwoo.net/fade_img/bn_main_img1.jpg' align='absmiddle' border='0'></a>

                    </div>

                    <div id="mBannerDiv2" style="display:none; opacity=1; filter:alpha(opacity=100); width:400px; height:251px;" border='0' cellpadding='0' cellspacing='0'>

                           <a href="javascript:alert('2번링크로이동')"><img src='http://www.ziwoo.net/fade_img/bn_main_img2.jpg' align='absmiddle' border='0'></a>

                    </div>

                    <div id="mBannerDiv3" style="display:none; opacity=1; filter:alpha(opacity=100); width:400px; height:251px;" border='0' cellpadding='0' cellspacing='0'>

                           <a href="javascript:alert('3번링크로이동')"><img src='http://www.ziwoo.net/fade_img/bn_main_img3.jpg' align='absmiddle' border='0'></a>

                    </div>

                    <div id="mBannerDiv4" style="display:none; opacity=1; filter:alpha(opacity=100); width:400px; height:251px;" border='0' cellpadding='0' cellspacing='0'>

                           <a href="javascript:alert('4번링크로이동')"><img src='http://www.ziwoo.net/fade_img/bn_main_img4.jpg' align='absmiddle' border='0'></a>

                    </div>

                    <div id="mBannerDiv5" style="display:none; opacity=1; filter:alpha(opacity=100); width:400px; height:251px;" border='0' cellpadding='0' cellspacing='0'>

                           <a href="javascript:alert('5번링크로이동')"><img src='http://www.ziwoo.net/fade_img/bn_main_img5.jpg' align='absmiddle' border='0'></a>

                    </div>

                    <div id="mBannerDiv6" style="display:none; opacity=1; filter:alpha(opacity=100); width:400px; height:251px;" border='0' cellpadding='0' cellspacing='0'>

                           <a href="javascript:alert('6번링크로이동')"><img src='http://www.ziwoo.net/fade_img/bn_main_img6.jpg' align='absmiddle' border='0'></a>

                    </div>

             </td>

       </tr>

</table>