Slider Effect - 페이드 효과

 

Slider Effect - setInterval()를 이용하여 이미지 슬라이드 만들기

setInterval()메서드란?

일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다.

Javascript

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

        let currentIndex = 0;                           //현재 보이는 이미지
        let sliderCount = slider.length;                //이미지 갯수

        setInterval(() => {      
            let nextIndex = (currentIndex + 1) % 5;     //0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 반복

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

            slider.forEach(slider => {
                slider.style.transition = "all 0.3s"    //각각의 이미지들에게 css효과를 줌
            })

            currentIndex = nextIndex					//무한 반복 설정
            
        }, 2000);                                       //2초에 한번씩 실행

            //메커니즘

            // 2초 뒤에는
            // 첫번째 이미지 --> opacity: 0
            // 두번째 이미지 --> opacity: 1

            // 4초 뒤에는
            // 첫번째 이미지 --> opacity: 0
            // 두번째 이미지 --> opacity: 0
            // 세번째 이미지 --> opacity: 1

            // 6초뒤에는
            // 첫번째 이미지 --> opacity: 0
            // 두번째 이미지 --> opacity: 0
            // 세번째 이미지 --> opacity: 0
            // 네번째 이미지 --> opacity: 1