tabbanner.js

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

tabbanner.js

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

사용법

<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="//work6.kr/plugin/plugin_link/27"></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. Line2 ~ 6 : 스타일을 복사 그리고 붙여넣기 합니다. 웹 사이트에 맞게 수정 합니다.


2. Line10 : 제이쿼리를 설치 및 연결 합니다. 코드를 복사 그리고 붙여넣기 합니다.


3. Line11 : 제이쿼리 UI를 설치 및 연결 합니다.


4. Line12 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.


5. Line15 ~ 31 : html을 복사 그리고 붙여넣기 합니다. 기본 형식 입니다.


6. Line34 ~ 41 : 스크립트를 복사 그리고 붙여넣기 합니다.


7. Line36 : 배너가 되는 영역을 설정 합니다.


8. Line37 : 선택된 버튼을 표시하는 이미지 입니다.


9. Line38 : 배너 높이 입니다. 단위는 픽셀 입니다.


10. Line39 : 배너 정지 시간 입니다. (1000=1초)

 

 
 
 
 
 
Install
 

1. Line 2 ~ 6: Copy and paste the style. Modify it to fit your website.


2. Line10: Install and connect JQuery. Copy and paste code.


3. Line11: Install and connect the JQuery UI.


4. Line12: Register the domain after using the plug-in. Copy and paste code.


5. Line 15 ~ 31: Copy and paste html. The default format.


6. Line34 ~ 41: Copy and paste the script.


7. Line 36: Set the area to be a banner.


8. Line37: This is the image that displays the selected button.


9. Line 38: Banner height. The unit is pixels.


10. Line 39: Banner stop time. (1000 = 1 second)