[CSS3] 큐브처럼 돌아가는 배너

다음앱에 들어가면 메인메뉴가 큐브처럼 돌아가도록 되어있습니다.

다음앱처럼 돌아가는 큐브배너를 만들어봤습니다.

사용법이 조금 복잡해 보이지만 오브젝트 생성과정만 추가되었을 뿐입니다.

그리고 크롬과 사파리에서는 정상작동하지만 IE에서는 오작동합니다.

v0.2 업데이트

drag이벤트를 mouse이벤트로 대체.

v0.3 업데이트

배너가 4개 이하일경우 롤링시 배너이미지를 가지고 오지 못하는 현상 수정 

touchCube.zip

1. HTML 구성하기

<!-- 큐브배너 영역 --> <div id="cubeContainer" style="margin:0 auto;"> <div id="cubeSpinner"> <div class="face"></div> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> </div> <!-- 좌우버튼 영역 --> <div id="banner_navi" style="text-align:center;"> <img id="btn_l" src="images/left.png" style="width:50px;" /> <img id="btn_r" src="images/right.png" style="width:50px;" /> </div> <!-- 캐럿셀 영역 --> <ul id="nv_container" style="text-align:center;"> <li class="nv_btn" style="width:50px;display:inline-block">1</li> <li class="nv_btn" style="width:50px;display:inline-block">2</li> <li class="nv_btn" style="width:50px;display:inline-block">3</li> <li class="nv_btn" style="width:50px;display:inline-block">4</li> <li class="nv_btn" style="width:50px;display:inline-block">5</li> </ul>

① <div class="face"></div> : face는 고정된 이름의 클래스이름입니다. 바꾸면 플러그인 소스를 바꾸셔야합니다. 또한 개수가 4개고 그 이유는 사각형의 각 면을 의미하기 때문입니다.

② <div id="banner_navi">...</div> : 좌우버튼 영역입니다.

③ <div id="nv_container">...</div> : 캐럿셀영역입니다. 배너의 갯수만큼 만들어주시면 됩니다. 배너갯수랑 다르면 플러그인이 꼬여버립니다. 여기서는 배너를 5개를 사용하기 위해 5개를 만들었습니다.

2. JavaScript 구성하기

$(document).ready(function(){ var properties = []; properties[0] = { "img" : "/images/1.jpg", "color" : "#000", "event" : function(){alert("아이유1");} }; properties[1] = { "img" : "/images/2.jpg", "color" : "#000", "event" : function(){alert("아이유2");} }; properties[2] = { "img" : "/images/3.jpg", "color" : "#000", "event" : function(){alert("걸스데이1");} }; properties[3] = { "img" : "/images/4.jpg", "color" : "#000", "event" : function(){alert("걸스데이2");} }; properties[4] = { "img" : "/images/5.jpg", "color" : "#000", "event" : function(){alert("이연희1");} }; $("#cubeContainer").touchCube({ banner_wrp : $("#cubeSpinner"), banner_lbt : $("#btn_l"), banner_rbt : $("#btn_r"), nv_btn : $(".nv_btn"), properties : properties, cubeWidth : "300px", cubeHeight : "200px" }); });

① 컨테이너 영역인 <div id="cubeContainer">...</div>에 플러그인을 붙여줍니다.

옵션값들이 여러개 있는데 코드를 보면서 이해해 주시기 바랍니다.

② properties 설정하는게 조금 복잡합니다.

img는 배너의 이미지입니다.

color는 배너의 백그라운드컬러입니다.

event는 배너를 클릭했을때 실행되는 이벤트입니다.

3. 실행화면 보기

• 1
• 2
• 3
• 4
• 5