유니클로 슬라이드 간략버전

유니클로 슬라이드 간략버전 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

유니클로 슬라이드 간략버전 정보

jQuery 유니클로 슬라이드 간략버전

첨부파일

work17.zip (2.0M) 143회 다운로드 2012-10-09 11:41:04

본문

※ 예전에 한번 같은걸 올렸던 적이 있습니다.

홈페이지 리뉴얼하면서 작업했던 것들 싹 다 삭제했는데..

최근 통계를 보니깐 그 때 올렸던 링크 타고 오시는 분이 엄청 많으시더군요-_-;;

그래서 다시 올려 드립니다.^^;;

jQuery를 처음 배우기 시작했을 때 만든 코드라서, 조금 지저분합니다.

수정해서 쓰시는 것 보다, 코드의 핵심만 추려서 보시는게 옳다고 봅니다.

소스와 이미지 파일을 같이 압축해서 올려놓았습니다.

이미지는 유니클로 소유입니다. 배움의 목적으로 사용되었습니다만,

다른 사이트에 상업적으로 사용하시다가 걸리면 혼~~~쭐납니다.

자세한 질문사항은

http://gilynh.com

에서 마구마구 물어주세요 ^^

[원본]

http://www.uniqlo.kr

[예제]

http://gilynh.com/test/work17/

[CSS]

div#demo{overflow:auto;width:960px;margin:auto 0;text-align:center}
div.rollWrap{position:relative;width:960px;height:470px;overflow:hidden}
div.rollPhoto{position:absolute;top:0px;left:0px}
div.buttonWrap{display:none;margin:15px 0 0 0;width:960px}
div.thumPhoto{position:relative;float:left;margin-left:16px;cursor:pointer}
div.thumOver{position:absolute;top:-9px;left:0;width:106px;height:38px; background:url("./selecter.gif") no-repeat top center}

[HTML]

<div id="demo">
	<div class="rollWrap">
		<div class="rollPhoto">
			<img src="./01.jpg" />
		</div>
		<div class="rollPhoto">
			<img src="./02.jpg" />
		</div>
		<div class="rollPhoto">
			<img src="./03.jpg" />
		</div>
		<div class="rollPhoto">
			<img src="./04.jpg" />
		</div>
		<div class="rollPhoto">
			<img src="./05.jpg" />
		</div>
		<div class="rollPhoto">
			<img src="./06.jpg" />
		</div>
		<div class="rollPhoto">
			<img src="./07.jpg" />
		</div>
		<div class="rollPhoto">
			<img src="./08.jpg" />
		</div>
	</div>
	<div class="buttonWrap">
		<div class="thumPhoto">
			<div></div>
			<img src="./s01.gif" />
		</div>
		<div class="thumPhoto">
			<div></div>
			<img src="./s02.gif" />
		</div>
		<div class="thumPhoto">
			<div></div>
			<img src="./s03.gif" />
		</div>
		<div class="thumPhoto">
			<div></div>
			<img src="./s04.gif" />
		</div>
		<div class="thumPhoto">
			<div></div>
			<img src="./s05.gif" />
		</div>
		<div class="thumPhoto">
			<div></div>
			<img src="./s06.gif" />
		</div>
		<div class="thumPhoto">
			<div></div>
			<img src="./s07.gif" />
		</div>
		<div class="thumPhoto">
			<div></div>
			<img src="./s08.gif" />
		</div>
	</div>
	<div class="underBar">
		<img src="./underbar.gif" />
	</div>
</div>

[SCRIPT]

<script>
var bwCur = "out"; //하단에 대한 마우스의 버튼 초기상태
var currentIdx = 0; //현재 보여지고 있는 인덱스
var move = 1; // 0: 자동이동 중단, 1: 자동이동
var currentOver; // 현재 오버된 하단버튼
$("#demo").hover(
	function() {
		bwCur = "over";
		$(".buttonWrap").slideDown();
		move = 0;
	}, function() {
		bwCur = "out";
		move = 1;
		setTimeout("hideBw(bwCur)",500);
	}
);
function hideBw(bc) {
	bwCur = bc;
	if(bwCur == "out") {
		$(".buttonWrap").slideUp();
	}
}
$(".rollPhoto").each(function(index) {
	var rLeft = 0;
	$(this).css({
		left:960*index
	});
});
$(".thumPhoto").each(function(index) {
	if(index == 0) {
		$(this).css({
			marginLeft:0
		});
	}
	$(this).bind("mouseover mouseout click", function(event) {
		if(event.type == "mouseover") {
			currentIdx = $(this).index();
			moveTo(currentIdx);
		}
	});
});
function moveTo(index) {
	currentIdx = index;
	if(currentIdx > 7) {
		currentIdx = 0;
	}
	if(currentOver == undefined) {
		currentOver = $(".thumPhoto").eq(0);
	}
	currentOver.children().eq(0).removeClass("thumOver");
	currentOver = $(".thumPhoto").eq(currentIdx);
	currentOver.children().eq(0).addClass("thumOver");
	$(".rollPhoto").each(function(idx) {
		$(this).stop(true).animate({
			left:960*(idx-currentIdx)
		},{
			duration:1000,
			easing:'easeOutExpo'
		});
	});
}
function moveNext(index,mv) {
	move = mv;
	if(move==1) {
		currentIdx = index;
		if(currentIdx > 7) {
			currentIdx = 0;
		}
		currentIdx++;
		moveTo(currentIdx);
	}
}
setInterval("moveNext(currentIdx,move)",3000);
</script>