※ 예전에 한번 같은걸 올렸던 적이 있습니다.
홈페이지 리뉴얼하면서 작업했던 것들 싹 다 삭제했는데..
최근 통계를 보니깐 그 때 올렸던 링크 타고 오시는 분이 엄청 많으시더군요-_-;;
그래서 다시 올려 드립니다.^^;;
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년 전
감사합니다
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7530 | 10년 전 | 741 | ||
| 7529 |
파랑새1597
|
10년 전 | 1179 | |
| 7528 |
파랑새1597
|
10년 전 | 1276 | |
| 7527 |
integrity7
|
10년 전 | 1356 | |
| 7526 | 10년 전 | 2389 | ||
| 7525 |
다빈치코드777
|
10년 전 | 1080 | |
| 7524 | 10년 전 | 1545 | ||
| 7523 | 10년 전 | 951 | ||
| 7522 |
 나는웹디다 |
10년 전 | 971 | |
| 7521 |
blackkil
|
10년 전 | 1841 | |
| 7520 | 10년 전 | 1259 | ||
| 7519 |
Gaumi
|
10년 전 | 1055 | |
| 7518 | 10년 전 | 1468 | ||
| 7517 | 10년 전 | 804 | ||
| 7516 | 10년 전 | 1262 | ||
| 7515 | 10년 전 | 1384 | ||
| 7514 |
 돼지코구뇽 |
10년 전 | 4467 | |
| 7513 |
멋진남자임
|
10년 전 | 1123 | |
| 7512 |
다빈치코드777
|
10년 전 | 851 | |
| 7511 |
 LaRuota |
10년 전 | 3376 | |
| 7510 | 10년 전 | 1346 | ||
| 7509 | 10년 전 | 1110 | ||
| 7508 | 10년 전 | 698 | ||
| 7507 |
senseme
|
10년 전 | 713 | |
| 7506 |
멋진남자임
|
10년 전 | 1613 | |
| 7505 | 10년 전 | 3972 | ||
| 7504 | 10년 전 | 2130 | ||
| 7503 | 10년 전 | 972 | ||
| 7502 | 10년 전 | 501 | ||
| 7501 | 10년 전 | 1427 | ||
| 7500 | 10년 전 | 1470 | ||
| 7499 | 10년 전 | 3353 | ||
| 7498 | 10년 전 | 1164 | ||
| 7497 |
dethos79
|
10년 전 | 2946 | |
| 7496 | 10년 전 | 2093 | ||
| 7495 | 10년 전 | 808 | ||
| 7494 |
CHAVO
|
10년 전 | 1095 | |
| 7493 | 10년 전 | 2618 | ||
| 7492 | 10년 전 | 1201 | ||
| 7491 | 10년 전 | 1423 | ||
| 7490 | 10년 전 | 2307 | ||
| 7489 | 10년 전 | 2102 | ||
| 7488 |
toptopon
|
10년 전 | 870 | |
| 7487 |
 Terrorboy |
10년 전 | 1009 | |
| 7486 | 10년 전 | 3335 | ||
| 7485 | 10년 전 | 1288 | ||
| 7484 | 10년 전 | 1354 | ||
| 7483 | 10년 전 | 1007 | ||
| 7482 | 10년 전 | 633 | ||
| 7481 | 10년 전 | 850 | ||
| 7480 | 10년 전 | 1209 | ||
| 7479 | 10년 전 | 2574 | ||
| 7478 | 10년 전 | 1128 | ||
| 7477 |
멋진남자임
|
10년 전 | 1476 | |
| 7476 |
zeppeto
|
10년 전 | 1131 | |
| 7475 |
200점아빠
|
10년 전 | 904 | |
| 7474 | 10년 전 | 3993 | ||
| 7473 | 10년 전 | 966 | ||
| 7472 |
나르시스1
|
10년 전 | 1208 | |
| 7471 | 10년 전 | 863 | ||
| 7470 | 10년 전 | 1252 | ||
| 7469 |
플라이SINJI
|
10년 전 | 924 | |
| 7468 |
Terrorboy |
10년 전 | 512 | |
| 7467 |
Terrorboy |
10년 전 | 623 | |
| 7466 | 10년 전 | 1091 | ||
| 7465 | 10년 전 | 1161 | ||
| 7464 |
Terrorboy |
10년 전 | 1168 | |
| 7463 | 10년 전 | 1218 | ||
| 7462 |
진짜별사탕
|
10년 전 | 836 | |
| 7461 | 10년 전 | 922 | ||
| 7460 | 10년 전 | 3701 | ||
| 7459 |
멋진남자임
|
10년 전 | 1536 | |
| 7458 |
멋진남자임
|
10년 전 | 472 | |
| 7457 | 10년 전 | 904 | ||
| 7456 | 10년 전 | 746 | ||
| 7455 | 10년 전 | 2127 | ||
| 7454 | 10년 전 | 616 | ||
| 7453 | 10년 전 | 796 | ||
| 7452 |
중국어사이트제작
|
10년 전 | 495 | |
| 7451 | 10년 전 | 886 | ||
| 7450 | 10년 전 | 614 | ||
| 7449 |
울라라라우
|
10년 전 | 922 | |
| 7448 | 10년 전 | 1624 | ||
| 7447 |
멋진남자임
|
10년 전 | 478 | |
| 7446 | 10년 전 | 511 | ||
| 7445 |
네이비칼라
|
10년 전 | 1638 | |
| 7444 |
senseme
|
10년 전 | 1382 | |
| 7443 | 10년 전 | 1318 | ||
| 7442 | 10년 전 | 700 | ||
| 7441 |
멋진남자임
|
10년 전 | 1416 | |
| 7440 | 10년 전 | 874 | ||
| 7439 |
Terrorboy |
10년 전 | 735 | |
| 7438 |
Terrorboy |
10년 전 | 910 | |
| 7437 |
basement
|
10년 전 | 1019 | |
| 7436 |
잘살아보자
|
10년 전 | 1102 | |
| 7435 | 10년 전 | 1049 | ||
| 7434 | 10년 전 | 3777 | ||
| 7433 |
Terrorboy |
10년 전 | 2714 | |
| 7432 |
alexkim
|
10년 전 | 834 | |
| 7431 |
이웃집초보
|
10년 전 | 1286 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기