[Javascript] 이미지 슬라이드쇼 만들기

소영·2022년 7월 10일
0
const headerSlideImgs = document.querySelectorAll('.slideshow img');
let addNum = 0;			// add
let currentNum = 2;		// delete

const slideShowHandle = () => {
	headerSlideImgs[currentNum].classList.remove('active');	// reset
    headerSlideImgs[addNum].classList.add('active');
    // 0번째 이미지부터 차례대로 active class 추가
    currentNum = addNum;
    // delete active하기 위해 필요한 currentNum 변수 값을 addNum으로 설정해준다.
    // 왜? 위에 초기화 문장에서 앞의 사진을 지우고 다음 사진을 띄우기 위함
    addNum++;
    
    if (addNum > 2) addNum = 0;
}

slideShowHandle();
setInterval(slideShowHandle, 5000);

setInterval() : 주기적으로 인자를 실행하는 함수

0개의 댓글