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

자바스크립트를 이용한 슬라이드 형식 갤러리

Nextstep
프로필 보기이 회원 글보기
 · 18년 전 · 3822

자바스크립트를 이용한 슬라이드 형식 갤러리

하단의 태그 중 이미지만 변경하시면 됩니다.



< 예제 >









-----------------------------      소스 시작    ---------------------------------



<html>
<head>
<title>http://www.uplusweb.kr</title>

<style type="text/css">
    html {
        overflow: hidden;
    }
    body {
        margin: 0px;
        padding: 0px;
        background: #000;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    #diapo {
        position: absolute;
        left: 0%;
        top: 10%;
        width: 100%;
        height: 80%;
        background: #000;
        overflow: hidden;
    }
    #slider {
        position: absolute;
        width: 100%;
        height: 80%;
    }
    #slider img {
        border: none;
        position:absolute;
        visibility: hidden;
        filter: alpha(opacity=40);
        opacity: 0.4;
    }
    #button {
        position: absolute;
        overflow: hidden;
    }
    #legend {
        position: absolute;
        font-family: arial, helvetica, verdana, sans-serif;
        background: #111;
    }
    #button span {
        position:absolute;
        height: 100%;
    }
    #button span:hover {
        background:#FFF;
    }
    .loaded {
        background: #666;
        cursor: pointer;
    }
    .selected {
        background: #FFF;
    }
    #title {
        float: left;
        margin-left: 0.5em;
        color: #fff;
    }
    #txt {
        float: left;
        margin: 0.5em;
        margin-left: 2em;
        color: #bbb;
    }
    #credit {
        position: absolute;
        color: #888;
        font-family: arial;
        font-size: 0.6em;
        width:99%;
        text-align: right;
        bottom: 2px;
    }
</style>

<script type="text/javascript">

id = function(o){return document.getElementById(o);}

position = function(o, css){for(var i in css)o.style[i]=Math.round(css[i])+'px';}

setOpacity = function(o,alpha){
    if(o.filters)o.filters.alpha.opacity = alpha*100;
    else o.style.opacity = alpha;
}

diapo = {
    N:0,
    W:0,
    H:0,
    image_ratio:4/3,
    ims:0,
    imx:[],
    tit:[],
    txt:[],
    thu:0,
    pos:0,
    xc:0,
    xd:0,
    xm:0,
    dt:0,
    xs:0,
    move:false,

    slide:function(){
        with(this){
            // ===== scrolling loop =====
            xm += xs;
            xc += (dt*xm*.01);
            id("slider").style.left = Math.round(xc)+"px";
            if (xm == 10) xs = -1;
            if (xm) setTimeout("diapo.slide();", 16);
            else {
                // ===== enlighten pic =====
                for(var i=.5;i<=1;i+=.1)setTimeout("setOpacity(diapo.ims[diapo.pos], "+i+")", 160*i);
                setTimeout("diapo.move=false", 160);
            }
        }
    },

    cxd:function(p){
        with(this){
            // ===== calculates slider position =====
            if(W/H>image_ratio){
                wi = Math.round(H*(ims[p].width/ims[p].height));
                xd = -imx[p]+((W-wi)/2);
            } else xd = -imx[p];
            // ===== display text =====
            thu[p].className = "selected";
            id("title").innerHTML = tit[p];
            id("txt").innerHTML = txt[p];
        }
    },

    scroll:function(p){
        with(this){
            if(move){
                // ===== already scrolling: queue event =====
                setTimeout("diapo.scroll("+p+");", 128);
            } else {
                if(thu[p].className == "loaded"){
                    // ===== start scrolling =====
                    cxd(p);
                    setOpacity(ims[pos], .4);
                    thu[pos].className = "loaded";
                    pos = p;
                    dt = xd-xc;
                    xm = 0;
                    xs = 1;
                    move = true;
                    slide();
                }
            }
        }
    },

    pos_button:function(x,y,w){
        with(this){
            // ===== button bar & text positioning =====
            position(id("button"), {'left':x,'top':y+3,'width':w,'height':H/20});
            position(id("legend"), {'left':x,'top':y+6+H/20,'width':w,'height':H});
            position(id("title"), {'fontSize':Math.max(16,H/16)});
            position(id("txt"), {'fontSize':Math.max(8,H/32)});
            thu = id("button").getElementsByTagName("span");
            for(var i=0;i<N;i++){
                var wi = Math.round(w/N)-3;
                position(thu[i], {'left':2+i*(wi+3),'width':wi});
                if(ims[i].complete)thu[i].className = (i==pos)?"selected":"loaded";
            }
        }
    },

    resize:function(){
        with(diapo){
            // ===== resize layout =====
            W=id("slider").offsetWidth;
            H=id("slider").offsetHeight;
            var w=0;
            var h=0;
            var x=0;
            for(var i=0;i<N;i++){
                if(ims[i].complete){
                    w=ims[i].width;
                    h=ims[i].height;
                    ims[i].style.visibility="visible";
                    setOpacity(ims[i], (i==pos)?1:.4);
                    if(W/H>image_ratio){
                        // ===== horizontal centering =====
                        wi = Math.round(H*(w/h));
                        position(ims[i], {'left':x,'top':0,'width':wi,'height':H});
                        imx[i] = x;
                        x += wi+3;
                        if(i==0) pos_button((W-wi)/2,H,wi);
                    } else {
                        // ===== vertical centering =====
                        hi = Math.round(W/(w/h));
                        position(ims[i], {'left':x,'top':(H-hi)/2,'width':W,'height':hi});
                        imx[i] = x;
                        x += W+3;
                        if(i==0) pos_button(0,hi+(H-hi)/2,W);
                    }
                }
                if(xs==0)xc=xd;
            }
            // ===== reajust scroll position =====
            if(!move){
                cxd(pos);
                position(id("slider"), {'left':xd});
            }
        }
    },

    images_load:function(){
        with(this){
            // ===== loop until all images are loaded =====
            var M=0;
            for(var i=0;i<N;i++) if(ims[i].complete) M++;
            if(!move && ims[0].complete) resize();
            if(M<N || move) setTimeout("diapo.images_load();", 128);
        }
    },

    init:function(){
        with(this){
            // ===== images source =====
            ims = id("slider").getElementsByTagName("img");
            N = ims.length;
            // ===== create buttons =====
            for(var i=0;i<N;i++) {
                o = document.createElement("span");
                tit[i] = ims[i].title;
                txt[i] = ims[i].alt;
                ims[i].title = "";
                ims[i].alt = "";
                o.onmousedown = new Function("diapo.scroll("+i+");");
                id("button").appendChild(o);
            }
            images_load();
        }
    }
}

</script>
</head>

<body>

<div id="diapo">
    <div id="slider">
        <!--이곳에 갤러리 이미지를 포함하세요-->
        <img src=http://cbingoimage.naver.com/data/bingo_92/imgbingo_92/kinisky/29847/kinisky_37.jpg title="이미지 1">
        <img src=http://cbingoimage.naver.com/data3/bingo_82/imgbingo_29/mony87/29907/mony87_87.jpg title="설명 2">
        <img src=http://cbingoimage.naver.com/data3/bingo_5/imgbingo_45/tok888/24617/tok888_118.jpg title="설명 3">
        <img src=http://cbingoimage.naver.com/data/bingo_92/imgbingo_92/kinisky/29847/kinisky_37.jpg title="설명 4">
        <img src=http://cbingoimage.naver.com/data3/bingo_98/imgbingo_84/windyemail/30864/windyemail_13.jpg title="설명 5">
        <img src=http://cbingoimage.naver.com/data3/bingo_5/imgbingo_99/hanb5/29359/hanb5_12.jpg title="설명 6">
        <img src=http://cbingoimage.naver.com/data3/bingo_56/imgbingo_91/seulkee0926/37699/seulkee0926_27.jpg title="설명 7">
        <img src=http://cbingoimage.naver.com/data3/bingo_40/imgbingo_79/sashin60/37578/sashin60_4.jpg title="설명 8">
        <img src=http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data24/2006/5/30/192/%BC%DB%C7%FD%B1%B36.jpg title="설명 9">
        <!--이곳에 갤러리 이미지를 포함하세요-->
    </div>
    <div id="button"></div>
    <div id="legend">
        <span id="title"></span>
        <span id="txt"></span>
    </div>
</div>

<script type="text/javascript">
// ===== start script while loading images =====
function dom_onload() {
    if(id("slider")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
// ===== window resize event =====
onresize = diapo.resize;
// ================================================
</script>

</body>
</html>



-----------------------------   소스 끝  -------------------------------

[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]

첨부파일

슬라이드갤러리-테스트.htm (8.7 KB, 285회)
목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12201
Flash [초간단]버튼클릭하면 무비클립이 나오게 하고싶어요..
12200
기타 www 자동으로 붙이기
29244
HTML [다운로드] Ajax 기반 웹 2.0 플랫폼 '웹스퀘어' 2
12196
Flash [질문]플래시 위즈위드 메뉴 효과 방법 부탁드립니다. 3
29243
HTML 핑백을 구현하는 방법을 알고싶어요....
12188
Flash 플래시 ActionScript 3.0 프로그래밍 한글 도움말 pdf 7
12184
Flash Open Flash Chart 3
29231
HTML 타이틀 이미지 만드는 방법 11
29230
HTML 리코
12181
기타 툴팁 2
29229
HTML [해결방법] 인터넷 사이트를 열 수 없습니다. 작업이 중단되었습니다.
12179
기타 [펌] IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6. 1
12177
기타 [펌] yum update관련 오류 수정 LINUX 1
12173
Flash 서서히 늘어나는 리사이즈 팝업창 3
29226
HTML 레이어 전환 효과 주기 [IE 전용] 2
12172
정규표현식 자바스크립트 sort()를 이용한 숫자 정렬
25007
간이영수증 양식 2
12171
JavaScript DOM 이용 select box 옵션추가삭제
12170
기타 유용한 팁(일련번호 관련)
29225
HTML 실수로 지운 데이터 살리기..
12167
기타 [질문] UTF-8 ajax회원가입 폼이 안됩니다. 2
12166
JavaScript 아이디 중복체크
12157
기타 빈티지 효과만들기 8
12154
MySQL 그누보드 통합검색 방법... 2
12153
기타 input 테그에서 숫자만 입력 받고 자동 콤마 적용되는 소스
25002
뉴스레터 초안입니다. 4
12151
기타 웹프로그래밍 언어별 인클루드방법!!( 1
29224
HTML 이미지를 갤러리 형태로 [클릭하면 딱 맞는 창으로]
12148
JavaScript 심플한 드롭다운 레이어 메뉴 (2단계 메뉴 구성) 2
29223
HTML 자바스크립트를 이용한 슬라이드 형식 갤러리 현재글
12142
기타 리눅스에서 하드웨어 정보확인하는방법 (간단!) 5
29217
HTML 여기에 올려되겟는지 모르겟네요 zip파일 풀기. 1
12141
JavaScript 날짜 관련 쿼리 입니다. 한달을 요일별로 구함..
12136
MySQL linux 웹 호스팅시 가장 많이 쓰이는 명령어 정리^^ 4
12132
MySQL 리눅스랑 유닉스 mysql password함수 저장 틀려요.. 3
12130
MySQL 테이블 깨졌거나 복구 할때 간단한 팁. 1
29216
HTML Table생성 스크립트 파일 뽑아내기
29215
기타 Windows에서 오라클 완전히 삭제 하기..
12126
기타 [기술문서] prototype.js에 대한 좋은 자료가 있어 올립니다 3
12124
JavaScript 마우스 오버시 그림 변하게 하는 스크립트 소스 1
12122
기타 ip 조회하는 스크립트 1
12120
PHP 웹 서버를 이용한 인증 1
12111
JavaScript div 사이즈 5픽셀로 하기. -_- 8
25001
영업활동보고서
25000
고객관리일보!!
24999
거래처별 매출 집계표
24998
일일판매보고서
24997
편리한 거래명세표 양식
24994
제안서 각종 기획, 제안서 , 사업계획서 등 편리한 자료입니다. 2
24985
제안서 홈페이지 제안서, 기획서 사용 시 유용한 자료!! 8
12109
기타 넣을 분류를 찾지 못해 여기에 넣습니다.(사이트별 자동로그인 주소) 1
12105
Flash [질문]플래시 CS버전에서 Instance Name~~!! 3
12104
기타 libphp4.so: cannot restore segment prot after reloc: Permission denied　
12096
Flash apache에서 이미지 캐싱 처리(mod_expires) 7
12094
기타 [펌] EUC-KR -> UTF-8 파일명 변경 1
12091
기타 대용량 파일 업로드 모듈 2
12090
MySQL 리눅스 mysql 에서 백그라운드 실행
12079
JavaScript 거리에서 찍은 인물사진 더 멋있게- 10
29211
HTML 낡은 포스터효과를 내어보자 3
12072
기타 돌아가는 글자 6
29210
HTML 구멍난 자바스크립트 보안
12070
기타 꽃 만들기 (반복 복사 및 메쉬사용 예) 1
29207
HTML 올가미툴에 대해 배워보자 2
12067
JavaScript div layer 위치 Javascript 2
12061
기타 매끄러운 투명 립글로즈 입술 표현하기!! 5
29204
HTML 한글패치 삭제하는 방법 2
12058
기타 Windows Server 2003 에서 Photoshop cs3 설치방법 2
12057
기타 HTTP 인증(Basic타입)이 걸린 URL을 fsockopen에서 여는 방법
12056
PHP php로 엑셀파일 만들기
24984
축의결혼부의부조봉투
12055
JavaScript lampp 스타트 간단명령
12053
JavaScript 중앙정렬 사이트에 영향없이 오른쪽 배너 붙이기 1
12051
MySQL apm 1
12050
MySQL LOG
12049
기타 OpenSSH(Open Secure SHell)
12048
기타 dhcp
12047
Linux X 윈도우
12046
Linux BOOT PROCESS
12045
Linux Linux 명령어 사용방법
12044
기타 kernel compile
12043
JavaScript vi
12042
기타 Nis/NFS
12041
PHP User Management
12040
JavaScript 쉘
12039
기타 Process
12038
Linux 파일 시스템
12037
Linux programming
12036
Flash 시스템 튜닝
12035
JavaScript Quota
12034
MySQL LOG
12033
기타 IP_Masquerading Configuration
12032
Linux 메모리
12031
JavaScript IPCHAINS
12028
MySQL Eclipse PDT 1.0 정식 릴리즈판 그누연동하기. 2
12026
Linux linux + samba 1
12025
Linux 압축 그리고 백업( Backup)
12020
기타 폰트 한글표기로 보기 4
12017
기타 이미지 사진 만들기 예쁜얼굴 만들기 2
12015
기타 이미지파일정보 1
12013
기타 아쿠아버튼 1
이전 다음
전체 목록