javascript(21.3.29)

* :nth-child(원하는 순서) 를 사용하면 같은 엘리먼트에 id 나 class 명을 사용 하지 않고 원하는 위치에 엘리먼트에 명령을 줄수있다.

.interview_content>li:nth-child(1){ left: 0px;animation: slider 2s;}

*순서대로 회전하게 하는 코드

index=0 으로 시작해서 1씩 증가하게 한 후 li.length 랑 같아지면 0으로 다시 리셋되게 한 후에 onNum 은 index 보다 1이 크게 만든후 i 는 인덱스처럼  0에서 시작하게한다. i 가 index 값이랑 같으면 out i가 onNum랑 같아지면 on 그이외는  명령을 주지 않는다. 그러면 

var index = 0;
        function slider() {
            li = document.querySelectorAll('.interview_content>li');
            if (index == li.length) index = 0;
            for (i = 0; i < li.length; i++) {
                onNum = index + 1;
                if (onNum == li.length) {
                    onNum = 0;
                } if (i == index) {
                    console.log(i + "번째 클래스명 out");
                    li.item(i).setAttribute('class', 'out');
                } else if (i == onNum) {
                    console.log(i + "번째 클라스명 on");
                    li.item(i).setAttribute('class', 'on');
                }
                else {
                    li.item(i).setAttribute('class', '');
                }
            }
            index++;
        }
        setInterval(slider, 1000);

}