slide

4092 ワード
テキストリンク

テレビのクロムプレーヤーをつけて、背景画面を一定時間後に変化させます.
  • html:#slider divに5個のitemを入れます.
  • css
    プロジェクトをposition:absolute;に重ね、opacity:0;とは見えないようにします.z-index:0;itemにshowクラスが追加されている場合は、opacity:1;、z-index:1;です.
  • js:setIntervalを使用してshowclassを5つのアイテムにループする関数を作成し、2秒おきに実行します.
    • 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);
    Day2
    IOSにおける符号化変換方法