롤링배너(?) 갤러리

https://sir.kr/qa/495896 - 질문이 올라와서 예전에 만들어 두었던 것을 약간 보층해서 코드 공유합니다.

제가 별로 안 쓰는 형태라 개별버튼은 안 만들었습니다.^^

장면전환시 애니메이션 css 를 쓰지 않고 레거시(?)한 방식으로 감속탄성 코드를 자바스크립트에서 만들었습니다.

https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

image_1 부터 image_n 까지 원하는 대로...

[code]

<style>
#galleryDiv { position:relative; margin:0 auto; }
#imageDiv { overflow:hidden; }
#imageDiv div { display:flex; width:200%; }
#imageDiv img { display:block; width:50%; }
#buttonDiv { position:absolute; top:0px; width:100%; height:100%; padding:20px; display:flex; justify-content:space-between; align-items:center; box-sizing:border-box; }
#buttonDiv img { display:block; cursor:pointer; width:50px; height:50px; }
</style>
<div id="galleryDiv">
    <div id="imageDiv"><div><img><img></div></div>
    <div id="buttonDiv"><img><img></div>
</div>
<script>
autoSec = 5; // 자동넘기기 - 초단위
targetSpeed = 10; // 장면전환 속도 - 숫자가 커질수록 느려짐
leftButton = "https://blog.kakaocdn.net/dn/I1GYB/btq8bL8uxVv/guiZYpTMedre9zj97Y1jk0/img.png"; // 좌버튼 이미지
rightButton = "https://blog.kakaocdn.net/dn/bniCh0/btq8bsg19MB/PJUsaJdJkpJdbkHcWUC9wk/img.png"; // 우버튼 이미지
image_1 = "https://blog.kakaocdn.net/dn/bS0Wvp/btr8J1cQhlx/hl8E8tv5M9rfwvuma8q6Fk/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/zYSgG/btr8P0DskTO/i6JzVmVy3gsM5by353o3E0/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/bD8PyW/btr8LgN5SsY/AvjSnqZ0xgsM3FvpHsaDh1/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/dSddpv/btr8Mn64wqT/b5P6xKyDYfVXuDOeEtcKtK/img.jpg";
image_5 = "https://blog.kakaocdn.net/dn/cBCuTv/btr8J48xbjE/e5z35o9vMjSJeYJA8auRJ1/img.jpg";
buttonDiv.querySelectorAll("img")[0].src = leftButton;
buttonDiv.querySelectorAll("img")[1].src = rightButton;
for (imgTotal = 0; this["image_" + (imgTotal + 1)]; imgTotal++);
function imageMode() {
    imageDiv.querySelectorAll("img")[0].src = this["image_" + arguments[0]];
    imageDiv.querySelectorAll("img")[1].src = this["image_" + (arguments[0] === imgTotal ? 1 : ++arguments[0])];
    targetCount = 0;
}
addEventListener("resize", galleryMode = () => {

    galleryDiv.style.width = "100%";
    galleryWidth = Math.floor(galleryDiv.offsetWidth);
    galleryDiv.style.width = galleryWidth + "px"; 
    galleryPoint = -galleryWidth;
    imageDiv.querySelector("div").style.marginLeft = "0px";
} );
galleryMode();
imageMode(img = 1);
buttonDiv.querySelectorAll("img")[0].onclick = () => {
    targetCount = autoSec * 100;
    for (ic of document.querySelectorAll("#imageDiv, #imageDiv img")) ic.style.transform = "rotateY(180deg)";
}
buttonDiv.querySelectorAll("img")[1].onclick = () => {
    targetCount = autoSec * 100;
    for (ic of document.querySelectorAll("#imageDiv, #imageDiv img")) ic.style.transform = "rotateY(0deg)";
} 
setInterval(() => {
    ++targetCount;
    changePoint = Number(imageDiv.querySelector("div").style.marginLeft.slice(0, -2));
    if (Math.abs(changePoint - galleryPoint) <= 0.5) {
        imageDiv.querySelector("div").style.marginLeft = "0px";
        imageMode(img = img === imgTotal ? 1 : ++img);
    }
    else {
        if (targetCount >= 0 && targetCount < autoSec * 100) changePoint = 0;
        else changePoint += (galleryPoint - changePoint) / targetSpeed;
        imageDiv.querySelector("div").style.marginLeft = changePoint + "px";
    }
}, 10);
</script>

[/code]