slide

TV에 크롬 캐스터 켜두면 배경화면이 일정시간 있다가 변하는 것 처럼 효과 만들기.

1. html : #slider div 안에 item 5개를 넣는다.
2. css
   item들을 position:absolute;로 겹쳐두고 opacity:0;으로 보이지 않게 해준다. z-index:0;
   item에 show 클래스가 더해지면 opacity:1;, z-index:1;을 해준다.
3. js : show class를 5 개의 item들에 돌아가며 달아주는 함수를 만들고, 2초 간격으로 실행할 수 있게 setInterval을 이용한다.

function slide() {
    const firstSlide = document.querySelector('.item:first-child');
    //show 라는 클래스로 선택할 수 있는게 없으면 null값이 들어가겠지.
    const currentSlide = document.querySelector('.show');
    
    if(currentSlide) {
        currentSlide.classList.remove('show');
        const nextSlide = currentSlide.nextElementSibling;

        if(nextSlide) {
            nextSlide.classList.add('show');
        } else {
            firstSlide.classList.add('show')
        }

    } else {
        firstSlide.classList.add('show');
    }
}

slide();

setInterval(slide, 2000);