그누보드 - 좌우형 슬라이드 갤러리 - 바닐라 스크립트

좌우형 슬라이드 갤러리 - 바닐라 스크립트 정보

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

본문

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

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

제이쿼리나 다른 라이브러리를 이용한 슬라이드 갤러리는 많지만 순정 바닐라 스크립트로 코드를 짜 논 걸 본적이 없어서 한번 만들어 보았습니다.

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

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

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

4. 옵션은 주석이나 스타일을 보면 금방 알 수 있습니다.

5. 기타 문제점이 보이면 차후 수정해 나갈게요.


<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>

--------------------

2021년 8월 15일 오후 9시 50분에 2가지 문제점을 수정하여 다시 올렸습니다.

1. 1픽셀씩 삑사리나는 오류 수정

2. 모바일 가로 세로 회전시 새로고침 없는 리사이징 구현

댓글 32개

rainbi 자기소개 아이디로 검색 전체게시물 회원게시물

좌우형 슬라이드 갤러리 - 바닐라 스크립트 > 그누보드5 팁자료실

그누보드5 팁자료실

관련링크

본문

댓글 32개

회원로그인

로그인