배너자동롤링, 정지재생버튼, 인덱스버튼

HTML

<div id="banner">
    <ul class="txt">
        <li><a href="">국립민속박물관 교육&middot;행사후기 바로가기</a></li>
        <li><a href="">어린이박물관 홈페이지 바로가기</a></li>
        <li><a href="">덴마크국립박물관 사이버한국실 바로가기</a></li>
        <li><a href="">표트르대제 인류학&middot;민족지학박물관 한국자료 바로가기</a></li>
    </ul>
    
    <ul class="img">
        <li class="li1"><a href=""><img src="img/banner_1.gif" alt="해당이미지설명" /></a></li>
        <li class="li2"><a href=""><img src="img/banner_2.gif" alt="해당이미지설명" /></a></li>
        <li class="li3"><a href=""><img src="img/banner_3.gif" alt="해당이미지설명" /></a></li>
        <li class="li4"><a href=""><img src="img/banner_4.gif" alt="해당이미지설명" /></a></li>
     </ul>
     <ul class="view_num">
        <li class="first"><a href="" title="첫번째 배너가기">1</a></li>
        <li><a href=""  title="두번째 배너가기">2</a></li>
        <li><a href=""  title="세번째 배너가기">3</a></li>
        <li><a href=""  title="네번째 배너가기">4</a></li>
     </ul>

     <ul class="play">
        <li><a href=""><img src="img/btn_play.gif" alt="재생" /></a></li>
        <li><a href=""><img src="img/btn_stop.gif" alt="정지" /></a></li>
     </ul>          
</div>

CSS

#banner {position:relative;width:222px;float:left;}
        #banner .img, #banner .view_num, #banner .p {display:none;}
        #banner .img{width:222px;height:97px;margin-bottom:5px;}
        #banner ul{position:relative;}
        #banner li{float:left;}

        #banner li.li1{display:show;position:absolute;top:0;left:0;}
        #banner li.li2{display:none;position:absolute;top:0;left:0;}
        #banner li.li3{display:none;position:absolute;top:0;left:0;}
        #banner li.li4{display:none;position:absolute;top:0;left:0;}

        #banner ul.view_num {position:absolute;top:100px;right:0;}
        #banner ul.view_num li 
                    {display:block;width:14px;height:20px;line-height:20px;margin-right:5px;padding-left:6px;
                     background:grey;}
        #banner ul.view_num li.first{background:url('img/banner_tab_bg.gif');font-weight:bold;}
        #banner ul.view_num li a{color:#fff;}
        #banner ul.view_num li.first a{color:#fff;}

        #banner ul.play li{padding-right:5px;}

JQUERY

$(document).ready(function(){
    //초기화 텍스트 숨기기 
    //이미지, 버튼숫자,플레이버튼 보이기
    $("#banner .img,#banner .play,#banner .view_num").show();
    $("#banner .txt").hide();

    //버튼숫자 클릭시 해당하는 이미지보여주기
    $("#banner .view_num>li").click(function(){
        
        clearTimeout(rolling);
        $index = $(this).index();
        banner_view($index);        
        
        return false;
    
    });

    //플레이버튼클릭하면 자동롤링
    $("#banner .play>li:eq(0)").click(function(){
            clearTimeout(rolling);
            banner_start();     
            return false;   
    });

    //정지하면 자동롤링정지
    $("#banner .play>li:eq(1)").click(function(){
            clearTimeout(rolling);  
            return false;   
    });

    //페이지로딩시 자동롤링
    cnt=0;//호출횟수, 값이 누적되어야하는 변수
    banner_start();
    
});

function banner_start(){
    rolling =setInterval(function (){
    cnt++;banner_view(cnt%4);},2000);
    //이미지인덱스 0,1,2,3만 보이도록하기 위해서 %4를 함. 1초동안 보여줌
        
}

function banner_view(n){    
    $("#banner .img>li").eq(n).show().siblings().hide();
    $("#banner .view_num>li").eq(n).addClass("first").siblings().removeClass("first");
}