Sliding window

앞으로

뒤로

HTML

							

앞으로

뒤로

CSS

							#carouselWrap{margin:20px auto;width:620px;height:135px;padding:5px;background:url('/florakid_lib/images/slider/background.gif') no-repeat 0 0;position:relative;}
							#carouselPrev{position:absolute;top:65px;left:-8px;cursor:pointer;}
							#carouselNext{position:absolute;top:65px;right:-8px;cursor:pointer;}
							#carousel{width:100%;height:100%;overflow:hidden;}
							#carouselInner ul.column{width:605px;height;105px;padding:15px 0 15px 15px;float:left;}
							#carouselInner ul.column li{float:left;margin-right:10px;display:inline;}
						

CSS 상세 설명

패널을 감싸고 있는 #carouselWrap은 패널의 외곽(장식 태그)을 배경 이미지로 설정하였습니다. 외곽 폭(5px)의 여백은 padding으로 확보하고 표시영역(굵은 선 안쪽 부분)의 width와 height를 설정합니다.

"앞으로" 버튼(#carouselPrev) 및 "뒤로" 버튼(#carouselNext)을 position:absolute로 설정하기 위해 #carouselWrap에는 position:relative를 설정해 둡니다. #carouselPrev와 #carouselNext는 각각 #carouselWrap의 좌우에 배치하고 마우스 포인터의 모양을 cursor속성으로 설정하여 손가락 모양으로 변경되도록 합니다.

패널의 표시 영역(#carousel)은 #carouselWrap으로 설정한 표시 영역과 같은 사이즈가 되도록 width:100%와 height:100%를 설정하고 표시 영역으로부터 벗어난 부분을 overflow:hidden으로 보이지 않도록 합니다.

패널(ul.column)은 float로 가로 방향으로 나열하고 ul.column의 안쪽의 li태그도 float로 가로 방향으로 정렬합니다. li태그에 float를 지정한 경우 IE에서는 사이즈가 어긋나 버리는 버그가 있으므로 display:inline을 설정하여 버그를 피하도록 합시다. 이것으로 HTML은 완성되었습니다. 패널 전체를 묶는 #carouselWrap에는 패널 전체의 폭(width)을 설정할 필요가 있지만 패널의 수를 유연하게 변경할 수 있도록 CSS에서보다는 jQuery 쪽에서 계산하여 설정하도록 합니다.

SCRIPT

							$(document).ready(function(){
								$("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px"); 
								$("#carouselInner ul.column:last").prependTo("#carouselInner");
								$("#carouselInner").css("margin-left","-620px");

								// 앞으로 버튼
								$("#carouselPrev").click(function () {
									$("#carouselNext, #carouselPrev").hide();
									$("#carouselInner").animate({
										marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px"
									},"slow","swing",
									function () {
										$("#carouselInner").css("margin-left","-620px");
										$("#carouselInner ul.column:last").prependTo("#carouselInner");
										$("#carouselNext, #carouselPrev").show();
									});
								});//end Prev

								// 뒤로 버튼
								$("#carouselNext").click(function () {
									$("#carouselNext, #carouselPrev").hide();
									$("#carouselInner").animate({
										marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px"
									},"slow","swing",function () {
										$("#carouselInner").css("margin-left","-620px");
										$("#carouselInner ul.column:first").appendTo("#carouselInner");
										$("#carouselNext, #carouselPrev").show();
									});
								}); // end Next
							});
						

SCRIPT 상세 설명

1.#carouselInner의 폭 설정 하기, 기본 셋팅

초기 설정에서는 처음에 패널 전체를 묶는 #carouselInner의 폭을 설정하고 있습니다. #carouselInner의 폭은 표시 영역의 폭(620px) * 패널(ul.column)의 수입니다.
다음으로 prependTo()를 사용하여 마지막 패널(ul.column)을 #carouselInner의 가장 앞쪽으로 이동합니다. css()로 margin-left를 네거티브 마직(마이너스 값을 가진 margin값)을 설정하고 #carouselInner를 왼쪽으로 620px 이동시킵니다.

#carousel에 overflow:hidden을 설정하고 있기 때문에 브라우저에서의 표시는 변하지 않습니다. 다만 실제로는 패널의 가장 앞부분으로 가장 뒷부분의 패널이 이동한 상태가 됩니다.

2. #carouselPrev 처리

#carouselPrev에 대해서 click 이벤트를 설정하고 클릭하면 패널을 왼쪽 방향으로 슬라이딩 시키는 처리를 기술합니다.
click 이벤트에서는 먼저 hide()로 2개의 버튼을 비표시로 설정합니다. 슬라이딩 처리 중에 버튼이 클릭되면 제대로 표시 위치가 계산이 되지 않으므로 일시적으로 클릭할 수 없도록 하기 위해서입니다.
그다음엔 #carouselInner에 animate()를 사용하여 슬라이딩 시킵니다. "앞으로" 버튼은 왼쪽에서 오른쪽으로 패널을 이동시켜야 되므로 margin-left에 표시 영역의 폭(620px)을 더한 겂을 설정합니다. 그러면 슬라이딩 전체가 왼쪽으로 슬라이딩되고 표시되고 있는 패널(ul.column)의 앞에 위치하고 있는 패널이 표시됩니다. CSS("margin-left")로 가져온 값은 parseInt()로 정수로 변경하고 나서 표시 영역에 더해 줘야합니다. 애니메이션 효과의 속도는 "slow"로 움직임의 스타일은 "swing"으로 설정합니다.
슬라이딩 애니메이션 효과가 끝난 뒤의 동작은 콜백합무로 설정합니다. 초기 설정과 같도록 마지막 패널(ul.column)을 #carouselInner의 가장 앞으로 이동시켜 #carouselInner의 margin-left를 최초의 값으로 되돌리는 것으로 현재 표시되고 있는 ul.column의 가장 앞에 ul.column이 존재하는 상태를 다시 만듭니다.
마지막으로 비표시 상태로 만들어 놓은 두 개의 버튼을 표시 상태로 되돌리면 "앞으로" 버튼의 동작 처리가 완성됩니다.

Auto Sliding 처리하기

							var timeID = setInterval(function() {
								$("#carouselNext").click();
							}, 5000);	
						

setinterval()은 javascript의 명령으로 function() {...} 안에 기술한 처리를 일정 시간 간격을 두고 반복 실행합니다(타이머 처리). 실행 간격은 function() {...}의 뒤에 ,(콤마)로 이어서 밀리초 단위로 설정합니다. 상단의 예의 경우 5000밀리초, 즉 5초 간격으로 처리를 실행합니다.

setInterval 앞에 있는 var timeID = 은 setInterval의 타이머 ID를 "timeID"라는 이름으로 변수에 저장하기 위한 기술입니다. setInterval은 "타이머 ID"라는 ID 정보를 갖고 있고 타이머 ID는 타이머를 정지할 때에 사용합니다.

$("#carouselNext").click은 "#carouselNext에 설정되어 있는 click 이벤트를 실행한다"는 의미입니다. 이것으로 5초 간격으로 "뒤로" 버튼을 클릭하는 것과 같은 처리가 반복 실행됩니다.

다만 이대로 라면 사이트를 방문한 유저가 슬라이딩 윈도우를 조작할 수 없기 때문에 버튼이 클릭되었을 때 아래와 같이 타이머 처리를 정지시킬 수 있도록 해둡니다.

							$("#carouselPrev img, #carouselNext img").click(function() {
								clearInterval(timeID);
							});
						

#carouselPrev나 #carouselNext에는 이미 click 이벤트를 설정해 두고 있으므로 타이머의 정지는 그 안쪽의 img 태그에 대해 설정합니다. clearInterval(timeID);로 앞서서 사용한 변수에 저장되어 있는 setInterval의 ID 정보를 되돌려 타이머 처리를 정지시킬 수 있습니다.