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

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

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

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

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



< 예제 >









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



<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회)
목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12007
기타 그라디언트 5
12006
기타 메일 서버 (SMTP, POP3) 설정
12005
MySQL 페도라 설치후 mysql이 원격으로 접속이 안될때
12000
Flash 일러스트 단축키 4
11994
Flash [[ 플래시 MX 단축키 요약 ]] 5
11993
기타 cgi 세팅 - httpd.conf
11992
MySQL [설치/설정] http-2.2.3에서 ssl 설치입니다.
11991
JavaScript adduser 명령어 기본사용법
11990
MySQL 리눅스 자동백업
11989
기타 리눅스 쿼터(quata)설정 및 설명
29203
HTML 그림위에 마우스 올리면 다른 이미지 뜨기
11988
Linux Xinetd 설치하기&설명
11986
MySQL mysql버전확인 1
11985
JavaScript su, telnet, ftp 권한제한
11984
기타 scp간략하게 사용방법 (파일서버간에복사)
11983
JavaScript Portsentry 1.1 설치하기(실시간해킹방지프로그램)
11982
Linux 리눅스에서 휴지통 (safedelete)
29202
HTML apache2 가상호스트 설정방법
29201
HTML [질문]DIV여러개를 부드럽게 오버랩 하기?
24968
포인트 몇개 올라가요 ?? 15
11981
JavaScript 시작과 멈춤이 가능한 스크롤 텍스트
29200
HTML 이미지에 마우스만 올려도 링크로 이동
29198
HTML 마우스 오른쪽 버튼 클릭시 강제 이동 1
11979
기타 [급 질문] 기존 메뉴 소스 수정해서 새로운 서브메뉴를 만들려고 하는데... 1
11978
Flash php.ini정보
11975
JavaScript Lightbox2 적용 방법 2
11973
기타 rpm 명령어 1
11972
기타 Trac 설치
11971
기타 Subversion Book
11970
기타 META 태그 사용법
11966
기타 예전에 올렸던 내용인데 어플로 제작해서 편하게 사용할 수 있도록 했습니다. 3
11962
MySQL MySQL 다운로드 3
29197
HTML Document Type Definition
29196
HTML 간단PHP(4)
11961
기타 간단PHP(3)
11960
기타 간단PHP(2)
11959
JavaScript 간단PHP(1)
11958
기타 fedora에서 yum install시 key문제...
11956
MySQL [질문] proftpd실행이 안되는 이유는?????? 1
11952
JavaScript [질문]페도라 6... Securt SSH 및 콘솔에서 vi편집기내에서 한글깨짐현상 3
11948
JavaScript [질문] 페도라리눅스에서 한글깨짐현상 3
11944
기타 포토샵 CS3 폰트가 바뀌는 현상 3
11936
기타 [질문] dns, 네임서버 설정 후 도메인 호스트 등록에 관해.. 7
11935
기타 여러장 사진을 하나로 합성하기
29195
HTML 포토샵 CS3으로 파노라마 사진을 만들어봅시다!
11934
JavaScript 포토샵 CS3에서 JPG 파일을 RAW 파일처럼 보정하기 - 사진 후보정
29191
HTML 입출력빌드프로그램으로 쇼핑몰 한번 만들어봤어요 3
11933
JavaScript [소스] 배경이미지 바꾸기 (PHP에서)에 대한 초보
29186
HTML 플래쉬에서 PHP와 연동하면서 파일 업로드(PHP쪽) 4
11932
Flash 플래쉬쪽에서의 파일업로드
11931
Flash 플래쉬에서 PHP와 연동하면서 파일 업로드
11926
Flash 초보가 올리는 왼쪽 메뉴(허접) 4
11922
MySQL [MySQL 초보자 분을 위한 기본 명령어] 3
29183
기타 CSS로 만든 - 3D 입체 갤러리 2
11920
기타 CS3에서 슬라이스툴 1
11916
기타 액체에서 고체로 되는 이미지 만들기 3
11915
기타 사진 색감 예쁘게 보정하기
11913
JavaScript 타일 이미지 멥핑 1
11910
기타 이미지를 뽀샤시 하게 만들어보아요 2
29182
HTML 브러쉬만들기
11904
기타 보안서버구축 관련 팁 5
11901
기타 눈물만들기 2
11900
기타 김 서린 창문에 낙서한 효과내기
29181
HTML 말랑말랑 젤리 텍스트
11898
기타 액션을 이용하여 간단하게 로모효과 주기 1
29179
HTML 간단하게 수채화 느낌 내기 1
11894
JavaScript htmlspecialchars() 역변환(반대) 함수 3
11892
기타 FLV 파일을 SWF로 돌릴 때 보안 문제 1
11890
JavaScript 배경이미지 바꾸기 (PHP에서) 1
11889
JavaScript 검색창 추가
11888
기타 <DIV> 태그 border 셋팅
11886
기타 질문입니다 1
11883
기타 [앞으로] < [1] [2] [3] [4] > [뒤로] 2
11879
기타 신비로운 텍스쳐 만들기 3
11875
기타 신비한 텍스쳐 만들기 3
29178
HTML 팝업소스 관련질문-오늘하루창안열기
29167
HTML 자바스크립으로 플래쉬 메뉴처럼 10
11874
JavaScript 글씨의 색을 자동으로 변환시켜주는 함수
29166
HTML [함수] js_rolling , JS로 만든 롤링 클래스
11872
PHP [정보] 관리자 및 회원의 페이지 접근 권한 간단구현 1
11870
JavaScript [스크립트] 이미지 리사이징 1
11867
PHP [서버운영] 아파치로그] sql로 바로 저장. 2
11866
PHP [서버운영] 아파치로그] 보기좋고 파싱하기 좋은 통합로그.
11865
MySQL MySQL에서 Query Cache 사용하기
29165
HTML 색상표
29162
HTML 입출력폼 생성기 2
11861
MySQL 무료 웹방화벽 Modsecurity..! 3
11851
MySQL 리눅스 포기 하고 싶습니다.. ㅠ.ㅠ 9
11850
기타 오라클 lock 체크 스크립트
11847
기타 포토샵CS3에서 글씨 쓰는 도중 굴림체로 글꼴이 자동으로 변경될 때... 2
11846
PHP __PHP_Incomplete_Class
11845
JavaScript ucc(동영상) 서비스 운영관련 자료 (키워드 ffmpeg)
11840
기타 서브 메뉴 사라지게 하는거 소스 수정 좀 부탁드립니다~ 4
11826
MySQL 리눅스 명령어!!!! (보기전에 심호흡 한번 하세요. ^^) 13
11825
MySQL MySQL 한글 정렬 Tip
11823
기타 외부문서불러오기 1
11816
기타 서브메뉴 사라지게 하려면 어떻게 해야하나요?? 6
11808
Flash 플래시 메뉴 소스 7
11805
Flash 서브 메뉴에 링크 거는 법 좀 알려주세요~ ㅠㅠ 2
11804
JavaScript <script>
이전 다음
전체 목록