Slider Effect - 연속적으로 움직이기

 

설명

1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다.

이번에는 setInterval()과 setTimeout()를 같이 사용해 보았습니다.

 

setInterval()과 setTimeout()의 차이점

- setInterval : 실행중 다른 setInterval로 인해 함수가 호출되면 기존에 실행되던 함수는 종료됩니다.

- setTimeout: 실행중 다른 setTimeout로 인해 함수가 호출되도 기존에 실행된 함수에 영향을 주지 않습니다.

setTimeout() 이란?

설명 : 기존 동작이 한번 일어납니다.

사용 방법

var SETTIMEOUT_NAME = setTimeout(FUNCTION, TIME);

실행중인 루프 종료 방법

clearInterval(SETINTERVAL_NAME);

공통적인 부분

- SETINTERVAL_NAME : 실행중인 루프(반복)를 종료시킬 때 사용합니다.

- FUNCTION : 루프로 실행할 함수

- TIME : 루프되는 시간

//slider03
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");        //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner");    //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider");             //5개의 이미지 저장
    
let currentIndex = 0;                                            //첫 번째 이미지(현재 보이는 이미지)
let sliderCount = slider.length;                                 //이미지 갯수
let sliderWidth = sliderImg.offsetWidth                          //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
sliderInner.appendChild(sliderClone);                            //첫 번째 이미지를 마지막에 추가

//JavaScript 애니메이션
function sliderEffect(){
    currentIndex++;
    sliderInner.style.transition = "all 0.3s";
    sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)"

    //마지막 사진에 갔을 때
    if(currentIndex == sliderCount){
        setTimeout(() => {
        
            //초기화
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)"
        },300)
        currentIndex = 0;
    }
}
setInterval(sliderEffect, 2000);