2週目InstagramクローンコードWestartgramスタート!!ログイン画面を実现!

ログイン画面

昨日作成したログインより、現在の実サービスでのログイン画面をそのまま実現しようと決心したので、再作成しました!次は結果です!

login coding

まず赤い箱をダイナミックに画像url値に入れて、アニメーション効果を与えて、自然に現れて、それから消えて、写真を変えます.

const imgSlide = document.querySelector('.img-slide').children;

let imgArr = [];
let cnt = 4;

function opacityImg() {
    if (cnt <= imgArr.length - 1) {
        if (cnt === 0) {
            imgArr[cnt%4].classList.remove('img-slide-out');
            imgArr[cnt%4].classList.add('img-slide-in');
            imgArr[imgArr.length - 1].classList.add('img-slide-out');
            imgArr[imgArr.length - 1].classList.remove('img-slide-in');
            cnt++;
        } else {
            imgArr[cnt%4].classList.remove('img-slide-out');
            imgArr[cnt%4].classList.add('img-slide-in');
            imgArr[cnt - 1].classList.remove('img-slide-in');
            imgArr[cnt - 1].classList.add('img-slide-out');
            cnt++;
        }
    } else {
        cnt = 0;
    }
    console.log(cnt);
}

function init() {
    for (let i = 0; i < imgSlide.length; i++)
        imgArr.push(imgSlide[i]);
    if (imgArr)
        setInterval(opacityImg, 1200);
}

init();

初めて思いついたときに書いたコードを除いて、後で修正した次のコードを考えると大きな違いがあります.

const imgSlide = document.querySelector('.img-slide').children;

let imgArr = [];
let cnt = 4;

function opacityImg() {
    if (cnt % 4 === 0) {
        imgArr[( imgArr.length - 1 )].classList.remove('img-slide-in');
        imgArr[( imgArr.length - 1 )].classList.add('img-slide-out');
        imgArr[( cnt % 4 )].classList.remove('img-slide-out');
        imgArr[( cnt % 4 )].classList.add('img-slide-in');
    } else {
        imgArr[( cnt % 4 ) - 1].classList.remove('img-slide-in');
        imgArr[( cnt % 4 ) - 1].classList.add('img-slide-out');
        imgArr[( cnt % 4 )].classList.remove('img-slide-out');
        imgArr[( cnt % 4 )].classList.add('img-slide-in');
    }
    cnt++;
    console.log(cnt % 4);
}

function init() {
    for (let i = 0; i < imgSlide.length; i++)
        imgArr.push(imgSlide[i]);
    if (imgArr)
        setInterval(opacityImg, 2000);
}

init();

このような符号化の原因

まず、imgSlide変数に.img-slideクラスのサブ要素を導入し、各オブジェクトをimgArr配列に配置します.
次いで、cntの値を増加させ、cnt%4の値に分割し、残りの値をimgArr配列の値に順番に近づけ、setInterval()を用いて巡回する.
1つの問題は、配列の初期値の場合、配列の終了値を削除し、それをif(cnt%4===0) {}の条件として、配列が初めて追加されたclass、すなわちimg-slide-inをimg-slide-outに変更することである.