티스토리 뷰

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


const sliderWrap = document.querySelector(".slider__wrap");		//변수 sliderWrap에 클래스 slider__wrap 저장
const sliderImg = document.querySelector(".slider__img");		//변수 sliderImg에 클래스 slider__img 저장
const slider = document.querySelectorAll(".slider");			//변수 slider에 클래스 slider 저장

let currentIndex = 0;   			//현재 보이는 이미지
let sliderCount = slider.length;    //sliderCount에 전체 이미지 갯수 저장


setInterval(() => {								//setInterval(반복 실행) 사용
	let nextIndex = (currentIndex + 1) % 5;		//nextIndex = currentIndex에 1을 더하고 5로 나눈 값의 나머지 값 저장

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

	slider.forEach(el => {					//slider의 element를 선택해 el로 저장 
    el.style.transition = "all 0.3s";		//el의 style에 transition = "all 0.3s" 추가
    })

	currentIndex = nextIndex;					//currentIndex값을 nextIndex 값으로 변경 

}, 2000);										//2초에 한번씩 실행
댓글
© 2018 webstoryboy