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

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

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

첨부파일

슬라이드갤러리-테스트.htm (8.7K) 303회 다운로드 2007-10-25 16:39:21

본문

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

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

< 예제 >

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

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

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>

</body>
</html>

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

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

자바스크립트를 이용한 슬라이드 형식 갤러리 > 퍼블리셔팁

퍼블리셔팁