롤링배너 페이드인효과

버튼 누르면 롤링되는 배너이미지를 많이 보셨을 거예요^-^

플래시를 쓰지 않고도 자연스럽게 페이드 효과 나면서 돌아가는 배너 소스입니다.

버튼이미지와 배너이미지 변경해서 쓰시면 될거예요~!

버튼이미지는 1.gif(원래이미지)  1_on.gif (마우스오버 이미지)  이런식으로 지정해 주셔야 오류가 안납니다.^^

 

 

 

 

 

이글이 도움 되셨다면 손가락 버튼 꾹 눌러주세요^-^

 

 

var eventTabScroll1 = parseInt("1");
var eventTabChk1,eventTabLast1
// 카테고리별 이벤트 배너 탭 전환 //
function switchEventIndexTab1(tNo) {
    var frm = document.all;
 
    // 버튼 리셋
    for(i=1; i<=4; i++) {
        if(tNo != i) {
            document.getElementById('menu_roll' + i).src = "../images/"+i+".gif"; //out 버튼이미지
            document.getElementById('banner_roll' + i).style.display = "none";     
        } else {
            document.getElementById('menu_roll' + i).src = "../images/" + i + "_on.gif";  //on버튼이미지
        }
    }
 
    var browserInfo = window.navigator.userAgent.toLowerCase();
    if ((browserInfo.indexOf('msie')) != -1) {
        document.getElementById('banner_roll' + tNo).style.display = ""; 
        document.getElementById('banner_rolling' + tNo).filters.blendTrans.Apply();
        document.getElementById('banner_rolling' + tNo).style.zIndex="20";
        document.getElementById('banner_rolling' + tNo).style.visibility = "visible";
        document.getElementById('banner_rolling' + tNo).filters.blendTrans.Play();
    } else {
        document.getElementById('banner_roll' + tNo).style.display = "";    
        document.getElementById('banner_rolling' + tNo).style.visibility = "visible";
    }
 
    // 이전항목 처리
    eventTabChk1 = "N";
    eventTabLast1 = tNo;
    hiddenEventTab1();
}

// 이벤트 배너 숨김처리(1초 후 실행)
function hiddenEventTab1() {
    var frm = document.all;
    // 레이어 리셋
    if(eventTabChk1=="Y") {
        for(i=1;i<=4;i++) {
            if(eventTabLast1!=i) {
                document.getElementById('banner_rolling' + i).style.visibility = 'hidden';
            }
            document.getElementById('banner_rolling' + i).style.zIndex="10";
        }
        clearTimeout(tabEventTimeOut_1);    	
    } else {
        eventTabChk1="Y";
        tabEventTimeOut_1 = setTimeout(hiddenEventTab1,4);
    }
}

// 이벤트 배너 탭 자동 전환 시작 //
function startEventIndexTab1() {
    if(eventTabScroll1 > 4)
    eventTabScroll1 = 1;
    switchEventIndexTab1(eventTabScroll1);
    eventTabScroll1++;
    tabTimeOut2 = setTimeout(startEventIndexTab1, 4000);  //자동으로 넘어가는시간 (1초=1000)
}

function startEventIndexTab_out1(str) {
    eventTabScroll1 = str;
    switchEventIndexTab1(eventTabScroll1);
    eventTabScroll1++;
    tabTimeOut2 = setTimeout(startEventIndexTab1, 6000);
}

// 이벤트 배너 탭 정지 //
function endEventIndexTab1() {
	clearTimeout(tabTimeOut2);  //건들지마세요
}

 

<!---- 아래부터 배너이미지--->
<div style="position:relative;width:254px;height:85px; text-align:left">
    <div style="position:absolute; z-index:1">
        <div id="banner_rolling1" style="position:absolute;margin:0 0 0 0;z-index:10; filter:blendTrans(duration=1);">   
            <div id="banner_roll1" name="banner_roll1" style="display:none;"><img src="배너이미지1.jpg" border="0"></div>
        </div>
        <div id="banner_rolling2" style=" position:absolute;margin:0 0 0 0;z-index:10; filter:blendTrans(duration=1);">   
            <div id="banner_roll2" name="banner_roll2" style="display:none;"><img src="배너이미지2.jpg" border="0"></div>
        </div>
        <div id="banner_rolling3" style="position:absolute;margin:0 0 0 0;z-index:10; filter:blendTrans(duration=1);">   
            <div id="banner_roll3" name="banner_roll3" style="display:none;"><img src="배너이미지3.jpg" border="0"></div>
        </div>
        <div id="banner_rolling4" style="position:absolute;margin:0 0 0 0;z-index:10; filter:blendTrans(duration=1);">   
            <div id="banner_roll4" name="banner_roll4" style="display:none;"><img src="배너이미지4.jpg" border="0"></div>
        </div>
    </div>
    
    <!---- 아래부터 탭버튼이미지--->
    <div style="position:absolute; top:-2px; right:5px; z-index:2">
        <img src="/image/1.gif" id="menu_roll1" name="menu_roll1" onmouseover="switchEventIndexTab1('1');endEventIndexTab1()" onmouseout="startEventIndexTab_out1(1);" style="cursor:pointer; margin:0 0px">
        <img src="/image/1.gif" id="menu_roll2" name="menu_roll2" onmouseover="switchEventIndexTab1('2');endEventIndexTab1()" onmouseout="startEventIndexTab_out1(2);" style="cursor:pointer; margin:0 0px" >
        <img src="/image/1.gif" id="menu_roll3" name="menu_roll3" onmouseover="switchEventIndexTab1('3');endEventIndexTab1()" onmouseout="startEventIndexTab_out1(3);" style="cursor:pointer; margin:0 0px">
        <img src="/image/1.gif" id="menu_roll4" name="menu_roll4" onmouseover="switchEventIndexTab1('4');endEventIndexTab1()" onmouseout="startEventIndexTab_out1(4);" style="cursor:pointer; margin:0 0px">
    </div>
</div>

<script language="JavaScript">
	startEventIndexTab1();
</script>