※ 예전에 한번 같은걸 올렸던 적이 있습니다.
홈페이지 리뉴얼하면서 작업했던 것들 싹 다 삭제했는데..
최근 통계를 보니깐 그 때 올렸던 링크 타고 오시는 분이 엄청 많으시더군요-_-;;
그래서 다시 올려 드립니다.^^;;
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>
첨부파일
댓글 7개
13년 전
정말 못하시는게 없으시네요 ㅠ
gilynh
13년 전
지운아벗님? 여기서 이러시면 안됩니다.
못하는거 정말 많습니다.
강좌 열심히 잘 먹겠습니다. 우걱! 우걱! ^~^)/
못하는거 정말 많습니다.
강좌 열심히 잘 먹겠습니다. 우걱! 우걱! ^~^)/
13년 전
좋은 소스네요.
gilynh
13년 전
감사합니다^^
스위치79
12년 전
이거 정말 좋은 소스 같습니다.
12년 전
와우.. 정말 좋은 소스 입니다. 감사 합니다. 잘 쓸께요.
takumi22
12년 전
감사합니다
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5630 | 13년 전 | 1054 | ||
| 5629 | 13년 전 | 2702 | ||
| 5628 | 13년 전 | 1275 | ||
| 5627 | 13년 전 | 1652 | ||
| 5626 | 13년 전 | 1284 | ||
| 5625 | 13년 전 | 1945 | ||
| 5624 | 13년 전 | 1352 | ||
| 5623 | 13년 전 | 941 | ||
| 5622 | 13년 전 | 417 | ||
| 5621 | 13년 전 | 13306 | ||
| 5620 | 13년 전 | 1191 | ||
| 5619 | 13년 전 | 3332 | ||
| 5618 | 13년 전 | 960 | ||
| 5617 | 13년 전 | 419 | ||
| 5616 | 13년 전 | 594 | ||
| 5615 |
Preware
|
13년 전 | 406 | |
| 5614 | 13년 전 | 535 | ||
| 5613 |
AMDbest
|
13년 전 | 4326 | |
| 5612 |
AMDbest
|
13년 전 | 6152 | |
| 5611 | 13년 전 | 868 | ||
| 5610 |
AMDbest
|
13년 전 | 4654 | |
| 5609 | 13년 전 | 957 | ||
| 5608 |
 TopSchooL |
13년 전 | 472 | |
| 5607 | 13년 전 | 641 | ||
| 5606 | 13년 전 | 457 | ||
| 5605 | 13년 전 | 354 | ||
| 5604 | 13년 전 | 598 | ||
| 5603 |
갑수엔터테인먼트
|
13년 전 | 756 | |
| 5602 | 13년 전 | 411 | ||
| 5601 | 13년 전 | 488 | ||
| 5600 | 13년 전 | 921 | ||
| 5599 | 13년 전 | 7462 | ||
| 5598 |
PHPㅡASP프로그래머
|
13년 전 | 2697 | |
| 5597 | 13년 전 | 402 | ||
| 5596 |
hoinV
|
13년 전 | 991 | |
| 5595 | 13년 전 | 916 | ||
| 5594 | 13년 전 | 1056 | ||
| 5593 | 13년 전 | 4920 | ||
| 5592 |
TopSchooL |
13년 전 | 359 | |
| 5591 | 13년 전 | 876 | ||
| 5590 |
PHPㅡASP프로그래머
|
13년 전 | 2305 | |
| 5589 | 13년 전 | 1937 | ||
| 5588 |
바다로가자
|
13년 전 | 1619 | |
| 5587 |
PHPㅡASP프로그래머
|
13년 전 | 1819 | |
| 5586 | 13년 전 | 2735 | ||
| 5585 | 13년 전 | 380 | ||
| 5584 | 13년 전 | 1864 | ||
| 5583 | 13년 전 | 1283 | ||
| 5582 |
바다로가자
|
13년 전 | 3062 | |
| 5581 |
 카카오툴즈 |
13년 전 | 3094 | |
| 5580 | 13년 전 | 895 | ||
| 5579 |
하하369
|
13년 전 | 3947 | |
| 5578 | 13년 전 | 1015 | ||
| 5577 | 13년 전 | 1205 | ||
| 5576 | 13년 전 | 1632 | ||
| 5575 |
가위바위보
|
13년 전 | 1585 | |
| 5574 |
danielle
|
13년 전 | 682 | |
| 5573 |
 palangsae |
13년 전 | 850 | |
| 5572 | 13년 전 | 2758 | ||
| 5571 | 13년 전 | 812 | ||
| 5570 | 13년 전 | 1383 | ||
| 5569 |
 byfun |
13년 전 | 2106 | |
| 5568 | 13년 전 | 1944 | ||
| 5567 | 13년 전 | 667 | ||
| 5566 |
 cshop |
13년 전 | 1299 | |
| 5565 | 13년 전 | 3660 | ||
| 5564 | 13년 전 | 916 | ||
| 5563 | 13년 전 | 1364 | ||
| 5562 | 13년 전 | 862 | ||
| 5561 | 13년 전 | 1035 | ||
| 5560 |
PHPㅡASP프로그래머
|
13년 전 | 1521 | |
| 5559 | 13년 전 | 619 | ||
| 5558 |
there007
|
13년 전 | 1527 | |
| 5557 | 13년 전 | 1168 | ||
| 5556 |
후라보노보노
|
13년 전 | 732 | |
| 5555 | 13년 전 | 9123 | ||
| 5554 | 13년 전 | 816 | ||
| 5553 |
가을이군요
|
13년 전 | 711 | |
| 5552 |
 스마트파인드 |
13년 전 | 787 | |
| 5551 | 13년 전 | 1507 | ||
| 5550 |
후라보노보노
|
13년 전 | 907 | |
| 5549 |
 junny |
13년 전 | 1005 | |
| 5548 | 13년 전 | 673 | ||
| 5547 | 13년 전 | 524 | ||
| 5546 | 13년 전 | 4605 | ||
| 5545 | 13년 전 | 898 | ||
| 5544 | 13년 전 | 1003 | ||
| 5543 | 13년 전 | 747 | ||
| 5542 | 13년 전 | 6626 | ||
| 5541 | 13년 전 | 804 | ||
| 5540 | 13년 전 | 1135 | ||
| 5539 | 13년 전 | 1111 | ||
| 5538 | 13년 전 | 2818 | ||
| 5537 | 13년 전 | 800 | ||
| 5536 | 13년 전 | 2688 | ||
| 5535 |
 직화오리팡야 |
13년 전 | 1167 | |
| 5534 | 13년 전 | 1752 | ||
| 5533 |
꿈꾸는인생
|
13년 전 | 1319 | |
| 5532 | 13년 전 | 1472 | ||
| 5531 | 13년 전 | 1681 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기