티스토리 뷰

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect02.html


const sliderWrap = document.querySelector(".slider__wrap");		
const sliderImg = document.querySelector(".slider__img");       //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장
const sliderInner = document.querySelector(".slider__inner");   //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장
const slider = document.querySelectorAll(".slider");            //slider에 클래스 slider(5개의 이미지) 저장

let currentIndex = -1;       //첫 번째 이미지(현재 보이는 이미지)
let sliderCount = slider.length;	//sliderCount에 전체 이미지 갯수 저장


setInterval(() => {				//setInterval(반복 실핼)사용
    (currentIndex < sliderCount-1) ? currentIndex++ : currentIndex = 0;	//삼항 연산자 사용
	//currentIndex가 sliderCount-1보다 작으면 currentIndex를 1씩 증가시키고 그렇지 않으면 0으로 만듦
    sliderInner.style.left = `${-800*currentIndex}px`	//sliderInner의 스타일에 left `${-800*currentIndex}px` 추가
    sliderInner.style.transition = "all 0.6s ease"		//sliderInner의 스타일에 transition "all 0.6s ease" 추가
    })
}, 2000)	//2초에 한번씩 실행
댓글
© 2018 webstoryboy