테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

gilynh
프로필 보기이 회원 글보기
 · 13년 전 · 2454 · 7

링크

http://www.uniqlo.kr (185) http://gilynh.com/test/work17/ (244)
01.png
※ 예전에 한번 같은걸 올렸던 적이 있습니다.
홈페이지 리뉴얼하면서 작업했던 것들 싹 다 삭제했는데..
최근 통계를 보니깐 그 때 올렸던 링크 타고 오시는 분이 엄청 많으시더군요-_-;;
그래서 다시 올려 드립니다.^^;;


jQuery를 처음 배우기 시작했을 때 만든 코드라서, 조금 지저분합니다.
수정해서 쓰시는 것 보다, 코드의 핵심만 추려서 보시는게 옳다고 봅니다.
소스와 이미지 파일을 같이 압축해서 올려놓았습니다.
이미지는 유니클로 소유입니다. 배움의 목적으로 사용되었습니다만,
다른 사이트에 상업적으로 사용하시다가 걸리면 혼~~~쭐납니다.

자세한 질문사항은
에서 마구마구 물어주세요 ^^


[원본]

[예제]


[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>

첨부파일

01.png (701 KB, 0회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 7개

지운아빠
프로필 보기이 회원 글보기
 13년 전
정말 못하시는게 없으시네요 ㅠ
gilynh
프로필 보기이 회원 글보기
 13년 전
지운아벗님? 여기서 이러시면 안됩니다.
못하는거 정말 많습니다.

강좌 열심히 잘 먹겠습니다. 우걱! 우걱! ^~^)/
port
프로필 보기이 회원 글보기
 13년 전
좋은 소스네요.
gilynh
프로필 보기이 회원 글보기
 13년 전
감사합니다^^
스위치79
프로필 보기이 회원 글보기
 12년 전
이거 정말 좋은 소스 같습니다.
쯔이란
프로필 보기이 회원 글보기
 12년 전
와우.. 정말 좋은 소스 입니다. 감사 합니다. 잘 쓸께요.
takumi22
프로필 보기이 회원 글보기
 12년 전
감사합니다

게시글 목록

번호 제목
12463
JavaScript 이미지 좌우로 이동 갤러리 입니다.
12462
PHP 파일 확장자 검사 함수 입니다.
12461
JavaScript 쉬운 replaceAll 입니다.
12460
PHP 그누보드 최근 게시물 파싱하기 입니다.
12459
PHP [알고리즘]퀵 정렬(Quick Sort)
12458
PHP php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을
12457
PHP array_unique 배열중복값 제거
12456
JavaScript 콤보스타일 메뉴 입니다.
12455
JavaScript 쿠키를 이용한 레이어 공지창 입니다.
12454
JavaScript 효과있는 텍스트 틱커 입니다.
12453
PHP [알고리즘]힙 정렬(Heap Sort)
12452
PHP HTTP 인증 하기 입니다.
12451
JavaScript 외부 문서 불러오기 입니다.
12450
JavaScript 지정한 날짜까지 New 이미지를 띄워주기 입니다.
12449
MySQL Common MySQL Queries 다양한 MySQL 쿼리 예제
12448
JavaScript 메일 주소 검사하기 체크박스 입니다.
12447
JavaScript 무단링크 금지하기 입니다.
12446
PHP 간단하게 마우스,드래그,복사 등 막기 입니다.
12445
MySQL DB백업 및 복원
12444
JavaScript 페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
12443
PHP 다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다.
12442
PHP PHP에 MYSQL 와 자바스크립트 연동 예제 입니다.
12441
jQuery input text 대문자만 받는 Jquery
12440
PHP 현재 페이지 URL 출력하기 입니다.
12439
JavaScript 이미지 업로드와 미리보기 입니다.
이전 다음
전체 목록