2주차 인스타그램 클론 코딩인 westargram 시작!! 로그인 화면을 구현하도록 하겠다!

login 화면

어제 만들었던 로그인 보다는 지금 실제 서비스중인 로그인 화면을 그대로 구현하기로 마음먹고 다시 만들었다! 아래가 그 결과!

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()을 사용해서 순회한다.

한가지 문제였던게 배열의 처음 값일 때 배열의 끝값을 삭제 해줬어야 했는데 그것을 if(cnt%4===0) {}으로 조건을 줘서 배열이 처음일때 마지막에 추가된 class 인 img-slide-in을 img-slide-out으로 변경시켜주도록 했다.