sliderEffect01

sliderEffect01 - 트랜지션

이펙트 3번째 유형인 슬라이드 이펙트 - 트랜지션 효과 입니다. 준비한 5개의 이미지가 일정시간마다 자동으로 다음으로 넘어가도록 만들었습니다.
추가적으로 3GX를 이용한 슬라이드 이펙트의 메인페이지도 준비하였으니 페이지에서 마우스를 움직여보세요!

---

참고

슬라이드 이펙트 01 페이지 우측하단 소스 보기를 클릭하시면 JAVASCRIPT, HTML, CSS를 확인할 수 있습니다.

원본 소스 보기 메인 페이지 보기

자바스크립트

자바스크립트 코드입니다. setInterval()함수를 통해 일정한 시간 간격을 두고 반복 실행하도록 하였습니다.
변수 nextIndex는 currentIndex + 1을 5로 나눈 나머지값이 되도록 하였고, currentIndex와 nextIndex에 style.opacity값을 주어 이미지 보이기/안보이기 설정하였으며, currentIndex = nextIndex를 주어 currentIndex++와 같은 기능을 하도록 하였습니다.
(HTML, CSS는 상단의 소스 보기를 참고하여주세요.)

const sliderWrap = document.querySelector(".slider__wrap")
const sliderImg = sliderWrap.querySelector(".slider__img")
const slider = sliderWrap.querySelectorAll(".slider")

let currentIndex = 0;               //현재 보이는 이미지

setInterval(() => {
    let nextIndex = (currentIndex + 1) % 5;   //다음 이미지

    slider[currentIndex].style.opacity = "0";  // 첫 번째 이미지를 안보이게
    slider[nextIndex].style.opacity = "1";     // 두 번째 이미지를 보이게

    currentIndex = nextIndex;

    // slider[0].style.opacity = "0";  // 첫 번째 이미지를 안보이게
    // slider[1].style.opacity = "1";  // 두 번째 이미지를 보이게

    // slider[1].style.opacity = "0";  // 두 번째 이미지를 안보이게
    // slider[2].style.opacity = "1";  // 세 번째 이미지를 보이게

    // slider[2].style.opacity = "0";  // 세 번째 이미지를 안보이게
    // slider[3].style.opacity = "1";  // 네 번째 이미지를 보이게

    // slider[3].style.opacity = "0";  // 네 번째 이미지를 안보이게
    // slider[4].style.opacity = "1";  // 다섯 번째 이미지를 보이게

    // slider[4].style.opacity = "0";  // 다섯 번째 이미지를 안보이게
    // slider[0].style.opacity = "1";  // 첫 번째 이미지를 보이게
}, 2000);   // 2초 단위로 실행