tabbanner.js- 탭이 있는 슬라이드 배너 제작 시 이용

[소개]

탭을 가지고 있는 슬라이드 배너로 위아래로 배너가 이동하며 현재 배너에 따라서 탭에 강조가 표시됩니다.

[플러그인명]

tabbanner.js

플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.

[버전]

1.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="플레이그라운드에서 제공하는 플러그인 cdn"></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. 플레이그라운드 홈페이지에서 jquery cdn 주소를 복사 하여 개발하는 곳에 붙여 넣기 합니다. (제이쿼리 및 제이쿼리 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="플레이그라운드에서 제공하는 플러그인 cdn"></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. 표시된 형태로 html을 작성해 줍니다. (위 html은 tabbanner 슬라이드를 사용하기 위한 기본 레이아웃 입니다.)

<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="플레이그라운드에서 제공하는 플러그인 cdn"></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.  표시된 형태로 스타일을 작성해 줍니다. (위 스타일은 tabbanner 슬라이드를 사용하기 위한 기본 스타일 입니다.)

<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="플레이그라운드에서 제공하는 플러그인 cdn"></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, 

delay:3000

});

});

</script>

4. 원하는 엘리먼트(예제에서는 main_banner)에 tabbanner를 실행해 줍니다.

[옵션설명]

tab : 탭 메뉴 그룹를 가리킵니다.

emphasis : 탭을 강조 했을때 이미지를 가리킵니다. (이미지는 png 추천)

height : 배너 전체 그룹의 높이를 지정 하며, 스타일의 height 와 일치해야 합니다. 예제에서는 main_banner 에 해당 합니다.

delay : 다음 배너로 슬라이드 된후 머무르는 시간을 지정 합니다. (1000 = 1초)

[문의하기]

copyright ⓒ 2017. 워크식스