※ 예전에 한번 같은걸 올렸던 적이 있습니다.
홈페이지 리뉴얼하면서 작업했던 것들 싹 다 삭제했는데..
최근 통계를 보니깐 그 때 올렸던 링크 타고 오시는 분이 엄청 많으시더군요-_-;;
그래서 다시 올려 드립니다.^^;;
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년 전
감사합니다
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5430 | 13년 전 | 1444 | ||
| 5429 |
phpman
|
13년 전 | 860 | |
| 5428 | 13년 전 | 1257 | ||
| 5427 |
phpman
|
13년 전 | 850 | |
| 5426 |
PHPㅡASP프로그래머
|
13년 전 | 1089 | |
| 5425 | 13년 전 | 794 | ||
| 5424 | 13년 전 | 737 | ||
| 5423 | 13년 전 | 733 | ||
| 5422 | 13년 전 | 1835 | ||
| 5421 |
PHPㅡASP프로그래머
|
13년 전 | 810 | |
| 5420 |
 Jeco7 |
13년 전 | 1635 | |
| 5419 | 13년 전 | 820 | ||
| 5418 | 13년 전 | 709 | ||
| 5417 | 13년 전 | 625 | ||
| 5416 | 13년 전 | 991 | ||
| 5415 | 13년 전 | 790 | ||
| 5414 | 13년 전 | 726 | ||
| 5413 | 13년 전 | 790 | ||
| 5412 | 13년 전 | 1354 | ||
| 5411 | 13년 전 | 864 | ||
| 5410 | 13년 전 | 1270 | ||
| 5409 | 13년 전 | 4251 | ||
| 5408 | 13년 전 | 987 | ||
| 5407 |
ckflower
|
13년 전 | 2426 | |
| 5406 |
ddokkani
|
13년 전 | 1379 | |
| 5405 | 13년 전 | 1593 | ||
| 5404 | 13년 전 | 663 | ||
| 5403 | 13년 전 | 696 | ||
| 5402 |
밤거리빵빵
|
13년 전 | 6023 | |
| 5401 |
PHPㅡASP프로그래머
|
13년 전 | 976 | |
| 5400 |
 cshop |
13년 전 | 1192 | |
| 5399 | 13년 전 | 4991 | ||
| 5398 |
부산아무개
|
13년 전 | 1647 | |
| 5397 | 13년 전 | 2450 | ||
| 5396 | 13년 전 | 1847 | ||
| 5395 | 13년 전 | 1052 | ||
| 5394 | 13년 전 | 1126 | ||
| 5393 | 13년 전 | 1043 | ||
| 5392 |
아르toria
|
13년 전 | 760 | |
| 5391 |
 아지야학교가자 |
13년 전 | 1145 | |
| 5390 |
디지털홍익인간
|
13년 전 | 7704 | |
| 5389 | 13년 전 | 3109 | ||
| 5388 | 13년 전 | 872 | ||
| 5387 |
WaaNee
|
13년 전 | 1909 | |
| 5386 | 13년 전 | 2104 | ||
| 5385 | 13년 전 | 4624 | ||
| 5384 | 13년 전 | 935 | ||
| 5383 | 13년 전 | 2131 | ||
| 5382 | 13년 전 | 664 | ||
| 5381 |
JacobJeon
|
13년 전 | 1083 | |
| 5380 | 13년 전 | 1137 | ||
| 5379 | 13년 전 | 686 | ||
| 5378 | 13년 전 | 10467 | ||
| 5377 | 13년 전 | 861 | ||
| 5376 | 13년 전 | 1459 | ||
| 5375 | 13년 전 | 838 | ||
| 5374 | 13년 전 | 847 | ||
| 5373 | 13년 전 | 2066 | ||
| 5372 | 13년 전 | 1694 | ||
| 5371 |
cshop |
13년 전 | 1639 | |
| 5370 | 13년 전 | 2906 | ||
| 5369 |
아자12345
|
13년 전 | 1014 | |
| 5368 | 13년 전 | 707 | ||
| 5367 | 13년 전 | 1085 | ||
| 5366 | 13년 전 | 2151 | ||
| 5365 | 13년 전 | 1568 | ||
| 5364 | 13년 전 | 1095 | ||
| 5363 |
cshop |
13년 전 | 1356 | |
| 5362 | 13년 전 | 817 | ||
| 5361 | 13년 전 | 1352 | ||
| 5360 | 13년 전 | 711 | ||
| 5359 | 13년 전 | 1369 | ||
| 5358 | 13년 전 | 1199 | ||
| 5357 | 13년 전 | 1597 | ||
| 5356 | 13년 전 | 1099 | ||
| 5355 |
techer
|
13년 전 | 1352 | |
| 5354 |
 몽키D팡야 |
13년 전 | 1012 | |
| 5353 | 13년 전 | 743 | ||
| 5352 | 13년 전 | 824 | ||
| 5351 | 13년 전 | 1203 | ||
| 5350 | 13년 전 | 742 | ||
| 5349 |
cshop |
13년 전 | 1444 | |
| 5348 | 13년 전 | 854 | ||
| 5347 | 13년 전 | 759 | ||
| 5346 | 13년 전 | 874 | ||
| 5345 | 13년 전 | 816 | ||
| 5344 |
후라보노보노
|
13년 전 | 1960 | |
| 5343 | 13년 전 | 1158 | ||
| 5342 | 13년 전 | 1125 | ||
| 5341 | 13년 전 | 2076 | ||
| 5340 |
 미운오리스키 |
13년 전 | 1117 | |
| 5339 |
AMDbest
|
13년 전 | 739 | |
| 5338 | 13년 전 | 737 | ||
| 5337 |
프로프리랜서
|
13년 전 | 1479 | |
| 5336 |
프로프리랜서
|
13년 전 | 923 | |
| 5335 | 13년 전 | 722 | ||
| 5334 |
cshop |
13년 전 | 974 | |
| 5333 | 13년 전 | 2838 | ||
| 5332 | 13년 전 | 1519 | ||
| 5331 | 13년 전 | 1322 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기