var MainBnr = new RollingBanner("mainbanner",7000); //메인배너
});

 

//롤링배너 모듈함수
function RollingBanner(BoxStr,delay){

    var This = this;

    this.box = document.getElementById(BoxStr);
    this.UL =  $(this.box).find("ul");
    this.bnrs = $(this.box).find("ul > li > a > img");
    this.btns = $(this.box).find("ol > li > button");
    this.bnrW = 980; //팝업폭
    this.idx = Math.floor( Math.random()*$(this.bnrs).length ); //초기 랜덤 현재 팝업값
    this.interval = null;
    this.sum = 1;
    this.delay = delay;

    //초기 설정
    this.init = function(){

        //배너 랜덤 초기값
        $(This.UL).css("width", (This.bnrs.length*This.bnrW)+"px"); //롤링박스 총 폭
        $(This.UL).css("margin-left",-(This.idx*This.bnrW )+"px"); //현재 배너 위치설정
        $(This.btns).eq(This.idx).find("img").attr("src",function(index,src){return src.replace('_out','_over');});

        //네비포인터 롤로버이벤트 등록
        $(This.btns).mouseover(function(){This.changeNavi( $(This.btns).index(this) );});

        //이벤트핸들러 등록
        $(This.box).hover(
            function(){
               if(This.interval){
                   clearInterval(This.interval);
                    This.interval = null;
               }
            },
            function(){
                This.interval = setInterval(
                            function(){
                                if( This.idx == (This.bnrs.length-1) ) This.sum = -1;
                                else if ( This.idx == 0 ) This.sum = 1;

                                This.changeNavi(This.idx+This.sum);
                            }
                            ,This.delay); // 배너 지연시간 1/1000초
            }
        );

        $(This.box).mouseout();
    
    }

    //네비게이션 리셋
    this.changeNavi = function(idx){
        
        //이전 버튼이미지 Off
        if( This.idx != null ) $(This.btns).eq(This.idx).find("img").attr("src",function(index,src){return src.replace('_over','_out');});

        //현재 인덱스 저장
        This.idx = idx;

        //새로운 버튼이미지 On
        $(This.btns).eq(This.idx).find("img").attr("src",function(index,src){return src.replace('_out','_over');});
        
        //배너 위치 변경
        $(This.box).find("ul").animate({"margin-left":-(This.idx*This.bnrW)+"px"},{ duration: 250, queue: false});

    }

    this.init();
    
}

 

-------------------------------------------------------------------------

 

html소스

<div id="mainbanner">
     <ol>
        <li><button><img src="main_cb3_pop_btn_out.png" alt="" /></button></li>
        <li><button><img src="main_cb3_pop_btn_out.png" alt="" /></button></li>
        <li><button><img src="main_cb3_pop_btn_out.png" alt="" /></button></li>
        <li><button><img src="main_cb3_pop_btn_out.png" alt="" /></button></li>
     </ol>
     <ul>
            <li><a href='#' ><img src='event1.jpg' border=0 width='980' height='352'></a></li>
            <li><a href='#' ><img src='event2.jpg' border=0 width='980' height='352'></a></li>
            <li><a href='#' ><img src='event3.jpg' border=0 width='980' height='352'></a></li>
            <li><a href='#' ><img src='event4(0).jpg' border=0 width='980' height='352'></a></li>
     </ul>
</div><!-- banner -->

 

--------------------------------------------

CSS

 

#mainbanner { position:relative; margin:0; padding:0; width:980px; height:352px; border:2px solid red; overflow:hidden; }             
#mainbanner > ol { position:absolute; width:980px; text-align:right; padding:0; top:5px; right:15px;  }
#mainbanner > ol > li { display:inline; padding:0; margin:0; }
#mainbanner > ol > li > button { padding:3px; cursor:pointer; background-color:transparent; border:0;}
#mainbanner > ul { margin:0; padding:0; }
#mainbanner > ul > li {  float:left; margin:0; padding:0;}