tabbanner.js

가이드가 탭을 이동함에 따라 배너도 함께 변경되는 플러그인

샘플영상

다운로드

tabbanner.js V1.0 다운로드

설치/사용법

<style>
#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}
#main_banner .container{position: absolute;}
#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}
#main_banner .tab img{}
#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/js/tabbanner.js"></script>


<div id="main_banner">

    <div class="container">
        <div><img src="y.jpg" align="absmiddle"></div>
        <div><img src="b.jpg" align="absmiddle"></div>
        <div><img src="r.jpg" align="absmiddle"></div>    
    </div>

    <div class="tab">
        <div><img src="btn_y.jpg" align="absmiddle"></div>
        <div><img src="btn_b.jpg" align="absmiddle"></div>
        <div><img src="btn_r.jpg" align="absmiddle"></div>
    </div>
    

    <img src="emphasis.png" class="emphasis"> <!-- 버튼 강조 이미지 -->
</div>

<script>
jQuery(function(){
    jQuery('#main_banner').tabbanner({
        tab:'.tab',
        emphasis:'.emphasis',
        height:300, //px
        delay:3000
    });
});
</script>

 

1. 제이쿼리 및 제이쿼리 UI 설치가 필요 합니다.

 

 

 

 

<style>
#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}
#main_banner .container{position: absolute;}
#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}
#main_banner .tab img{}
#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/js/tabbanner.js"></script>


<div id="main_banner">

    <div class="container">
        <div><img src="y.jpg" align="absmiddle"></div>
        <div><img src="b.jpg" align="absmiddle"></div>
        <div><img src="r.jpg" align="absmiddle"></div>    
    </div>

    <div class="tab">
        <div><img src="btn_y.jpg" align="absmiddle"></div>
        <div><img src="btn_b.jpg" align="absmiddle"></div>
        <div><img src="btn_r.jpg" align="absmiddle"></div>
    </div>
    

    <img src="emphasis.png" class="emphasis"> <!-- 버튼 강조 이미지 -->
</div>

<script>
jQuery(function(){
    jQuery('#main_banner').tabbanner({
        tab:'.tab',
        emphasis:'.emphasis',
        height:300, //px
        delay:3000
    });
});
</script>

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<style>
#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}
#main_banner .container{position: absolute;}
#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}
#main_banner .tab img{}
#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/js/tabbanner.js"></script>


<div id="main_banner">

    <div class="container">
        <div><img src="y.jpg" align="absmiddle"></div>
        <div><img src="b.jpg" align="absmiddle"></div>
        <div><img src="r.jpg" align="absmiddle"></div>    
    </div>

    <div class="tab">
        <div><img src="btn_y.jpg" align="absmiddle"></div>
        <div><img src="btn_b.jpg" align="absmiddle"></div>
        <div><img src="btn_r.jpg" align="absmiddle"></div>
    </div>
    

    <img src="emphasis.png" class="emphasis"> <!-- 버튼 강조 이미지 -->
</div>

<script>
jQuery(function(){
    jQuery('#main_banner').tabbanner({
        tab:'.tab',
        emphasis:'.emphasis',
        height:300, //px
        delay:3000
    });
});
</script>

 

3. 기본 레이아웃을 작성 하며, 버튼 이미지 및 배너 이미지를 순서대로 작성 합니다.

 

 

 

 

<style>
#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}
#main_banner .container{position: absolute;}
#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}
#main_banner .tab img{}
#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/js/tabbanner.js"></script>


<div id="main_banner">

    <div class="container">
        <div><img src="y.jpg" align="absmiddle"></div>
        <div><img src="b.jpg" align="absmiddle"></div>
        <div><img src="r.jpg" align="absmiddle"></div>    
    </div>

    <div class="tab">
        <div><img src="btn_y.jpg" align="absmiddle"></div>
        <div><img src="btn_b.jpg" align="absmiddle"></div>
        <div><img src="btn_r.jpg" align="absmiddle"></div>
    </div>
    

    <img src="emphasis.png" class="emphasis"> <!-- 버튼 강조 이미지 -->
</div>

<script>
jQuery(function(){
    jQuery('#main_banner').tabbanner({
        tab:'.tab',
        emphasis:'.emphasis',
        height:300,
//px
        delay:3000
    });

});
</script>

 

4. 자동으로 플러그인이 실행 될 수 있도록 함수를 작성 합니다.

 

 

 

 

 jQuery('#main_banner').tabbanner({
        tab:'.tab',  //배너 엘리먼트 영역
        emphasis:'.emphasis',   //버튼 강조 이미지 엘리먼트
        height:300,  //배너 높이 설정 (단위 : 픽셀)
        delay:3000  //배너 정지 시간 설정 (1000=1초)
    });

 

5. 옵션을 설정 합니다.

 

 

 

 

플러그인 설치/보수는 무료로 지원 하지 않습니다.
위로

잠시만 기다려주세요.