갤러리 [1] : 좌우형 슬라이드 바닐라 갤러리 > 팁

• 목록

<style>
.buttonImage { cursor:pointer; display:block; }
.spanButton { cursor:pointer; margin-left:5px; opacity:0.7; border-radius:50%; }
.galleryNum { font-family:Times New Roman; font-size:24px; font-weight:bold; color:#ffffff; }
</style>
<script>
hwRatio = 540 / 960; // 이미지 세로 가로 사이즈 - 세로부터 입력할 것
slideSpeed = 10; // 슬라이드 속도, 숫자가 작아질수록 빨라짐
btnMargin = 20; // 하단과의 간격, 0을 주면 무슨 옵션인지 알 것임
autoSec = 4; // 자동넘기기 시간, 0을 주면 자동옵션 무력화
slideRadius = "40px"; // 갤러리 라운드 테두리 픽셀이나 퍼센트값
btnBasic = "#ffffff"; // 개별버튼 색상
btnTarget = "#ff0000"; // 현재버튼 색상
nextImage = "https://blog.kakaocdn.net/dn/bniCh0/btq8bsg19MB/PJUsaJdJkpJdbkHcWUC9wk/img.png"; // 전진버튼 주소
prevImage = "https://blog.kakaocdn.net/dn/I1GYB/btq8bL8uxVv/guiZYpTMedre9zj97Y1jk0/img.png"; // 후진버튼 주소
image_1 = "https://blog.kakaocdn.net/dn/bELCNX/btrcQgkv9KH/uveax6oD38I50NtGsIYWTk/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/c19gna/btrcVj8QRB4/lmlmPAekpz4QpTd9AvkLX0/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/b0X4p0/btrcNJAjLX6/gHo23ivNNaxYskk9Mq4kV0/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/wT2Eu/btrcOjVFt6I/HrZYlCVgO1RGe2HouIbzUk/img.jpg";
image_5 = "https://blog.kakaocdn.net/dn/beSgol/btrc4Ei32I2/E5OkZ7ffKi9bBSjJZ6oOMk/img.jpg";
content_1 = "<div style='cursor:pointer;font-family:Times New Roman;font-size:48px;font-weight:bold;color:#cccccc' onclick=location.href='https://sir.kr'>SIR.KR</div>";
content_2 = "<div style=cursor:pointer onclick=window.open('https://sir.kr')><img src=https://blog.kakaocdn.net/dn/dtieGD/btrc4DRZTh1/P6gH4lxZoozWto0JrsRIYK/img.png style=dispaly:block></div>";
content_3 = "";
content_4 = "<div style='font-family:Times New Roman;font-size:48px;font-weight:bold;color:#cccccc'>SIR.KR<br><img src=https://blog.kakaocdn.net/dn/dtieGD/btrc4DRZTh1/P6gH4lxZoozWto0JrsRIYK/img.png style=dispaly:block></div>";
content_5 = "<div style=margin-top:30%;margin-left:-60%><img src=https://blog.kakaocdn.net/dn/dtieGD/btrc4DRZTh1/P6gH4lxZoozWto0JrsRIYK/img.png style=dispaly:block></div>";
for (imageTotal = 0; this["image_" + (imageTotal + 1)]; imageTotal++);
imgNumber = autoCount = npMode = 1;
slidePosition = 0;
function slideMode(slide) {
    slidePosition = Number(galleryTable.style.marginLeft.slice(0, -1));
    slideGallery = function() {
        if (slidePosition == slide) clearInterval(slideInterval);
        else {
            if (Math.abs(slidePosition - slide) <= 0.5) slidePosition = slide;
            else slidePosition += (slide - slidePosition) / slideSpeed;
            galleryTable.style.marginLeft = slidePosition + "%";
        }
    }
    slideInterval = setInterval(slideGallery, 10);
}
function autoMode() {
    autoCount += 1;
    if (autoCount == autoSec + 1) galleryGo(npMode ? "next" : "prev"), autoCount = 1;
}
if (autoSec > 0) setInterval(autoMode, 1000);
function slideClick() {
    if (slidePosition % 100 == 0) {
        for (img = 1; img <= imageTotal; img++) {
            this["btn_" + img].style.width = this["btn_" + img].style.height = img == arguments[0] ? "20px": "15px";
            this["btn_" + img].style.backgroundColor = img == arguments[0] ? btnTarget: btnBasic;
        }
        slideMode(-100 * ((imgNumber = arguments[0]) - 1));
        autoCount = 1;
        currentNum.innerText = ("0" + imgNumber).slice(-2);
    }
}
function galleryGo() {
    if (arguments[0] == "next") slideClick(imgNumber == imageTotal ? 1 : imgNumber + 1), npMode = 1;
    else if (arguments[0] == "prev") slideClick(imgNumber == 1 ? imageTotal : imgNumber - 1), npMode = 0;
    else slideClick(arguments[0]);
}
onresize = function() {
    galleryHeight = galleryDiv.offsetWidth * hwRatio;
    galleryDiv.style.height = buttonTable.style.height = galleryHeight + "px";
    buttonTable.style.marginTop = -galleryHeight + "px";
    buttonDiv.style.marginTop = -(btnMargin + 40 * hwRatio) + "px";
}
function galleryHtml() {
    document.write("<div id=galleryDiv style=overflow:hidden;border-radius:" + slideRadius + ">");
    document.write("<table id=galleryTable cellpadding=0 cellspacing=0 style=width:" + imageTotal * 100 + "%;height:100%;table-layout:fixed;margin-left:0%>");
    for (img = 1; img <= imageTotal; img++) document.write("<td style=background-image:url(" + this['image_' + img] + ");background-size:contain align=center>" + this['content_' + img] + "</td>");
    document.write("</table><table id=buttonTable style=width:100% cellpadding=20 cellspacing=0>");
    document.write("<td align=left><img class=buttonImage src=" + prevImage + " onclick=galleryGo('prev')></td><td align=right><img class=buttonImage src=" + nextImage + " onclick=galleryGo('next')></td></table>");
    document.write("<div id=buttonDiv style=display:flex;justify-content:center;align-items:center><span id=currentNum class=galleryNum style=margin-right:10px></span>");
    for (img = 1; img <= imageTotal; img++) document.write("<span id=btn_" + img + " class=spanButton style=background-color:" + btnBasic + " onclick=galleryGo(" + img + ")></span>");
    document.write("<span id=totalNum class=galleryNum style=margin-left:10px></span></div></div>");
    totalNum.innerText = ("0" + imageTotal).slice(-2);
    btn_1.style.marginLeft = "0px";
    galleryGo(1);
    onresize();
}
</script>
<div style=width:100%><script>galleryHtml()</script></div>