생활코딩

활용소스 좌우형 슬라이드 갤러리 - 바닐라 스크립트

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 414회 작성일 21-08-15 22:07

본문

이미지는 몇장이라도 상관없지만 가로 세로 길이가 똑 같은 이미지여야 합니다.

image_1 부터 원하는 갯수만큼 숫자를 붙여 나가면서 이미지 주소를 대입하면 자동으로 만들어집니다.


1. 전후진 버튼 클릭 후에는 자동넘기기시 전후진 방향 자동 감지.

2. 이미지가 제자리를 찾기 전에 버튼을 눌러도 반응이 없게 하는 "광분클릭 방지소스" 첨가

3. 가장 하단 <div style=width:960px> 의 가로는 퍼센트나 픽셀값을 바꾸면 바꾸는대로 알아서 이미지가 비율대로 리사이징 됩니다.


출처: https://sir.kr/g5_tip/16653


[소스]

<style>

#buttonDiv { display:flex; justify-content:center; align-items:center; }

.spanButton { cursor:pointer; margin-left:5px; opacity:0.7; border-radius:50%; }

.slideNum { 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 = "#000000"; // 현재버튼 색상

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/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg";

image_2 = "https://blog.kakaocdn.net/dn/1i2I1/btq8bsVCBHv/WccnmtYuL4C4KjEdqSCenK/img.jpg";

image_3 = "https://blog.kakaocdn.net/dn/xBQjY/btq8aOLB6zE/kvl0wXU5HGOa5wRj943fck/img.jpg";

image_4 = "https://blog.kakaocdn.net/dn/qyzaz/btq8bMl03Lh/zqchlJvs17HYcflcKJsJF1/img.jpg";

image_5 = "https://blog.kakaocdn.net/dn/qTFDC/btq8at8K8pH/yxX7giOadkys9yhlH3ssKk/img.jpg";

image_6 = "https://blog.kakaocdn.net/dn/ba1PN1/btq79NzZi9L/xRllNJgag5mwfeKrhdw2AK/img.jpg";

image_7 = "https://blog.kakaocdn.net/dn/3J3Ch/btq79MntdX8/mg1zUkOWgplDDKIg5KXUUk/img.jpg";

image_8 = "https://blog.kakaocdn.net/dn/bnCInn/btq799JxU9n/0IdjW0Y9gG78W577ey0eBK/img.jpg";

image_9 = "https://blog.kakaocdn.net/dn/KRlrB/btq8aNzdErU/CB8kbDIfKmehHHAKEc59J0/img.jpg";

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() {

    slideHeight = galleryDiv.offsetWidth * hwRatio;

    galleryDiv.style.height = buttonTable.style.height = slideHeight + "px";

    buttonTable.style.marginTop = -slideHeight + "px";

    buttonDiv.style.marginTop = -(btnMargin + 40 * hwRatio) + "px";

}

function slideHtml() {

    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></td>");

    document.write("</table><table id=buttonTable style=width:100% cellpadding=20 cellspacing=0>");

    document.write("<td align=left><img style=cursor:pointer src=" + prevImage + " onclick=galleryGo('prev')></td><td align=right><img style=cursor:pointer src=" + nextImage + " onclick=galleryGo('next')></td></table>");

    document.write("<div id=buttonDiv><span id=currentNum class=slideNum 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=slideNum 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>slideHtml()</script></div>


첨부파일

댓글목록

등록된 댓글이 없습니다.

Total 3건 1 페이지

검색


© 2021 단축 URL 서비스 | urly.kr