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

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

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

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

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



< 예제 >









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



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

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12452
JavaScript 마우스를 따라다니는 그림
40
네이버 처럼 실시간으로 신문사로 신문기사 받아오기.. 2
25015
ASCIIcode표 1
12447
Flash [질문] 랜덤으로 움직이는 무비클립을 영역밖으로 이동할 수 있는 방법이 있을까요? 4
12446
JavaScript SQLPLUS & PLSQL 기초
12445
JavaScript PLSQL이란
29296
HTML 동적 INPUT 박스
12440
기타 메뉴 4
12438
Flash 창밖에 풍경 1
12437
JavaScript 우분투 root관리자 접속 방법 (펌)
29294
HTML 우키막기 1
35
latest() sql 4
32
고수님들! 해결 좀 부탁드립니다. 메인화면에 공지사항이 안보이네요~~ 2
12434
JavaScript tar로 묶을때 특정 디렉토리나 파일 포함하지 않고 묶기 2
12433
Flash 도스상에서 플렉스 사용하기
12432
기타 INPUT 숫자만 입력받기
29293
HTML 컨텐츠 팝업 출력 소스
29
[php질문]세션 로그아웃되는 문제 (php소스에서처리가능한가요?) 2
12431
jQuery selectbox 대용으로 사용가능한 jquery popup 플러그인
12428
기타 플래쉬 주변이 점선이 생기는 것을 막아줍니다. 2
12421
jQuery JQuery + wSlide 를 이용한 슬라이딩 6
29292
HTML 시계
12411
기타 CSS hack 정리 9
12402
jQuery JQuery + JQchart + Canvas 로 라인 그래프 그리기 8
27
헉........ 1
29290
HTML 금액입력시 한글로 변환하여 표시 1
12400
Flash [질문] 페이지 인식 시킬때 플래시 테두리 회색라인 1
24
플래쉬파일로 2
12397
PHP 이번 달 달력 출력 2
12396
JavaScript 동적 테이블 추가,삭제
21
서버에러메세지 관련 질문입니다 2
12391
Flash 웹페이지 미리보기 snapshot 활용하기 4
12390
기타 랜덤 배너(가로/세로)를 출력하는 php source
18
php질문좀 하겠습니다. 2
16
듀얼 모니터에서 A모니터와 B모니터 풀화면으로 창을 여는 방법이 없을까요? 1
12377
Flash 쇼핑몰에서 많이 쓰는 자동 슬라이드 12
12373
Flash [질문] 이 책장을 넘기는 효과의 플래시효과는 어떻게 구현하는걸까요? 3
13
소스 syntex error 질문입니다.(초초보) 2
9
소스 php 질문(초초보) 3
12372
Flash 프로그램 소개:: php등 source code library
12371
기타 javascript 로 구현한 php 함수
12363
MySQL 서버에서 mysql euckr과 utf8 같이 사용하기 7
1
어떻게 하면... 7
13432
PHP php5.3 으로 업그레이드 했는데 그누보드가 안뜨네여.. 1
12362
JavaScript vista에서 한글 php 매뉴얼 chm파일이 안 보일&#46468;
12360
기타 홈페이지에 쓸만한 자바스크립트 1
12355
기타 리눅스 실시간 트래픽 모니터링 하기 4
25014
대학교 - 프로그래밍 결과 보고서
29287
HTML 광각렌즈로 촬영한 사진 왜곡현상 보정하기-동영상강좌 2
12352
기타 히스토리 브러쉬를 이용해서 특정부위만 강조-동영상강좌 2
12349
기타 레벨과 블렌딩모드로 노을사진 만들기-동영상강좌 2
29279
HTML 기상청 날씨정보 XML 7
12344
기타 네이버로그인 4
12340
기타 홈페이지에 날씨배너 삽입하기 (케이웨더) 3
12335
기타 xml 연동 웹상에서 이미지 안보일때... 도와주세요 4
12333
기타 자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. 1
12331
기타 자신의 홈피에 통합 검색 순위 (검색어, 음악, 영화, 도서)를 달아보자. 1
29273
HTML 자신의 홈피에 날씨를 달아보자. 5
12330
PHP 세션만을 이용한 현재 접속자. 로케이션 표시
12329
기타 [펌] ant & red5 설치법
12328
MySQL [펌] 리눅스에 java(자바) 와 tomcat(톰켓) 설치
12324
JavaScript 홈피 사진 올리는법 사진줄이 는법 3
12323
MySQL MySQL 자동으로 dump 받기
12318
MySQL 쿼리문 해석좀 부탁드립니다 4
12316
기타 이번주 일~토 날짜 출력~ 1
12313
JavaScript 이미지에 박스 넣기 2
12310
Flash [펌] RED5 파헤치기 2
12309
JavaScript php 파일을 html 확장자로 사용하기
12307
JavaScript 아파치 보안 팁 [외부에서 아파치정보 못 보게하기] 1
12303
기타 리눅스서버 보안팁 [tmp 보안세팅] 3
12296
JavaScript SSH 공격막아내기 방법 1 6
12291
MySQL php 보안팁 [php.ini] - 필수보안 사항 4
12280
Flash 플래시 배너 소스 10
12277
PHP 디렉토리 내의 이미지보기(겔러리) 소스 입니다. 2
12275
MySQL [펌] 사용자 계정 트래픽 제한 하기 1
29272
HTML JavaScript MD5 사용하기~
12274
기타 휠로 이미지 크기 제어
12260
Flash 구글 날씨 api를 이용한 날씨 보여주기 13
12252
기타 무료 설치형 웹하드 큐하드(베타) V1.0 7
12250
MySQL [펌] FTP 서버 보안, 이것만은 꼭 챙깁시다. 1
12248
JavaScript fedora core 3에서 GPG-KEY 를 다운로드 받지 않고 yum update하는 방법 1
29267
HTML ZMLSE(자랩메타로컬검색엔진) 무료소스 4
12245
기타 세션을 기준으로 한 간단한 현재 접속자 2
29266
HTML 드림위버에서 html소스를 최적화시키기
29261
HTML 그림안에 투명텍스트박스 넣기... 4
12239
Flash 플래시점선없애주는 자바스크립트 5
12238
Flash [질문] 플래시 테두리 제거 질문이요..ㅠㅠ
29251
HTML 숫자 100이하 절사 9
12236
기타 이메일 추출만 하고싶습니다!!!! 1
12231
기타 내사이트에 '네이버 하루 동안 가장 많이 본 뉴스' 를 달자...... 4
12228
기타 답변]버튼클릭하면 무비클립이 나오게 하고싶어요.. 2
12214
정규표현식 [펌] PHP 코드를 최적화하는 40가지 팁 (번역) 13
12211
Flash 플래시무비를 EXPLORE 창에서 한번 클릭 하여야 프리시 버튼이 작동 합니다. 2
12210
MySQL ..)아랫님.. mysql 버젼확인 (SQL문장)..More
29248
HTML 웹컬러(WebColor) 를 RGB 로 변경 2
29247
HTML 유닉스계열의 쉘 명령어 중에 디렉토리 용량을 체크하는 프로그램
25010
사이트 가입 리스트 3
12208
JavaScript file_put_contents() 함수 1
12207
MySQL bash shell의 환경설정 의미와 그 예
12202
MySQL [질문] ssh에서 mysqldump명령어 4
이전 다음
전체 목록