※ 예전에 한번 같은걸 올렸던 적이 있습니다.
홈페이지 리뉴얼하면서 작업했던 것들 싹 다 삭제했는데..
최근 통계를 보니깐 그 때 올렸던 링크 타고 오시는 분이 엄청 많으시더군요-_-;;
그래서 다시 올려 드립니다.^^;;
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년 전
감사합니다
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 130 | 20년 전 | 4020 | ||
| 129 | 20년 전 | 2958 | ||
| 128 | 20년 전 | 3697 | ||
| 127 | 20년 전 | 3534 | ||
| 126 | 20년 전 | 3788 | ||
| 125 | 20년 전 | 8607 | ||
| 124 | 20년 전 | 2612 | ||
| 123 | 20년 전 | 3768 | ||
| 122 | 20년 전 | 3225 | ||
| 121 | 20년 전 | 2627 | ||
| 120 | 20년 전 | 2690 | ||
| 119 | 20년 전 | 2597 | ||
| 118 | 20년 전 | 2872 | ||
| 117 |
 damoa.biz |
20년 전 | 3071 | |
| 116 | 20년 전 | 5336 | ||
| 115 | 20년 전 | 3938 | ||
| 114 | 21년 전 | 4987 | ||
| 113 | 21년 전 | 6229 | ||
| 112 | 21년 전 | 7336 | ||
| 111 | 21년 전 | 18449 | ||
| 110 | 21년 전 | 6891 | ||
| 109 | 21년 전 | 2898 | ||
| 108 | 21년 전 | 4153 | ||
| 107 |
prosper
|
21년 전 | 2514 | |
| 106 |
prosper
|
21년 전 | 4335 | |
| 105 |
아우겐나이스
|
21년 전 | 2932 | |
| 104 | 21년 전 | 2277 | ||
| 103 | 21년 전 | 2490 | ||
| 102 | 21년 전 | 2276 | ||
| 101 | 21년 전 | 2593 | ||
| 100 | 21년 전 | 1765 | ||
| 99 | 21년 전 | 1584 | ||
| 98 | 21년 전 | 1634 | ||
| 97 | 21년 전 | 2149 | ||
| 96 | 21년 전 | 1896 | ||
| 95 | 21년 전 | 2395 | ||
| 94 | 21년 전 | 3583 | ||
| 93 | 21년 전 | 1577 | ||
| 92 | 21년 전 | 1773 | ||
| 91 | 21년 전 | 3194 | ||
| 90 | 21년 전 | 2355 | ||
| 89 | 21년 전 | 3192 | ||
| 88 | 21년 전 | 2878 | ||
| 87 | 21년 전 | 3307 | ||
| 86 | 21년 전 | 5154 | ||
| 85 | 21년 전 | 2539 | ||
| 84 | 21년 전 | 4840 | ||
| 83 | 21년 전 | 2517 | ||
| 82 | 21년 전 | 3131 | ||
| 81 | 21년 전 | 7646 | ||
| 80 | 21년 전 | 3845 | ||
| 79 | 21년 전 | 3227 | ||
| 78 | 21년 전 | 4708 | ||
| 77 | 21년 전 | 2920 | ||
| 76 | 21년 전 | 6233 | ||
| 75 | 21년 전 | 4486 | ||
| 74 | 21년 전 | 5801 | ||
| 73 | 21년 전 | 3639 | ||
| 72 | 21년 전 | 5983 | ||
| 71 | 21년 전 | 3134 | ||
| 70 | 21년 전 | 2863 | ||
| 69 | 21년 전 | 2653 | ||
| 68 | 21년 전 | 2462 | ||
| 67 | 21년 전 | 2671 | ||
| 66 | 21년 전 | 2693 | ||
| 65 | 21년 전 | 3800 | ||
| 64 | 21년 전 | 2843 | ||
| 63 | 21년 전 | 2468 | ||
| 62 | 21년 전 | 2282 | ||
| 61 | 21년 전 | 3100 | ||
| 60 | 21년 전 | 3152 | ||
| 59 | 21년 전 | 2532 | ||
| 58 | 21년 전 | 2605 | ||
| 57 | 21년 전 | 2988 | ||
| 56 | 21년 전 | 2348 | ||
| 55 | 21년 전 | 2778 | ||
| 54 | 21년 전 | 2149 | ||
| 53 | 21년 전 | 2377 | ||
| 52 | 21년 전 | 2719 | ||
| 51 |
prosper
|
21년 전 | 2372 | |
| 50 |
prosper
|
21년 전 | 2185 | |
| 49 | 21년 전 | 2202 | ||
| 48 | 21년 전 | 2362 | ||
| 47 | 21년 전 | 1954 | ||
| 46 | 21년 전 | 1940 | ||
| 45 | 21년 전 | 2148 | ||
| 44 | 21년 전 | 2377 | ||
| 43 | 21년 전 | 4592 | ||
| 42 |
prosper
|
21년 전 | 2727 | |
| 41 |
prosper
|
21년 전 | 2128 | |
| 40 | 21년 전 | 2191 | ||
| 39 | 21년 전 | 2160 | ||
| 38 | 21년 전 | 2437 | ||
| 37 | 21년 전 | 2580 | ||
| 36 | 21년 전 | 1794 | ||
| 35 | 21년 전 | 4091 | ||
| 34 | 21년 전 | 3866 | ||
| 33 | 21년 전 | 3009 | ||
| 32 |
prosper
|
21년 전 | 2922 | |
| 31 | 21년 전 | 5304 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기