비주얼 스튜디오 코드 79_뮤직 플레이어 3

section이 회전을 해야한다.

section에 시간을 줘야 움직이는게 보임

넥스트 버튼을 눌렀을 때 오른쪽에 있는 씨디가 2번, 왼쪽 씨디가 8번째이다. 

기준점에서 10vw만큼 떨어져있음

script

제이쿼리는 css, 자바스크립트 style

n = 0 변수 지정해준다. n++는 오른쪽 으로 회전 , n--는 왼쪽회전 

rotate {n * deg  = 0 * 45} deg

45도씩 증감하여 회전한다.

버튼을 누르면 section이 회전한다.

함수지정

<script>
    function activation(index,lists){
                for(let el of list){
                    el.classList.remove("on");
                }
                lists[index].classList.add("on");
            }
</script>

 

on을 갖고 있는 액티브 값을 0으로 변수 지정

0-7번까지 인덱스 번호가 돌아갈 것이다.

회전하면서 8개의 on을 제거할 것이다.

index에 들어가있는 번호(선택되어있는 번호)만 on을 넣어줄 것이다.

length-1을 넣어 0부터 시작하도록한다.

●함수지정

function activation(index,lists){
            for(let el of lists){
                el.classList.remove("on"); /*on기능 없애기*/
            }
            lists[index].classList.add("on");/*인덱스 선택된 아이만 on 기능*/
}

 

● 삼항식

수학에서 삼항식은 세 항으로 구성된 다항식입니다. 삼항식의 각 항은 덧셈이나 뺄셈으로 구분됩니다. 삼항식의 일반적인 형식은 다음과 같습니다. ax^2 + bx + c 여기서 "a", "b", "c"는 계수를 나타내고 "x"는 변수를 나타냅니다. 삼항식에서 변수 "x"의 가장 높은 지수는 2이며, 이는 2차 항에 해당합니다. 삼항식은 대수학에서 다양한 응용 프로그램을 가질 수 있으며 일반적으로 이차 방정식을 풀거나 포물선 그래프를 그리거나 이차 식을 인수분해할 때 발생합니다. 그들은 2차 방정식에서 중요한 역할을 하며 인수 분해, 제곱 완성 또는 2차 공식 사용과 같은 방법을 사용하여 풀 수 있습니다. 예를 들어, 식 2x^2 + 3x - 1은 덧셈과 뺄셈으로 구분된 세 항(2x^2, 3x 및 -1)으로 구성되어 있으므로 삼항식입니다.

?가 if를 대신한다.

active == len 을 비교했을 때 ? 가 참일 때 active = 0 : active 1씩 증가해준다.

active 와 len을 비교

active가 0일 때 active++; 1을 증가시켜준다.

(active == len) ? active = 0 : active++;

 

함수지정한 것을 복사해서 밑에 넣어준다. index를 active 값으로 변경

<script>
	//삼항연산, ?가 if문을 대신한다.
            (active == len) ? active = 0 : active++;
            activation(active,lists); //함수호출
            // 인덱스 값이 없으므로 active값을 바꾸어서 사용
</script>

 

 //이전 단추를 클릭했을 경우
        btnPrev.addEventListener("click",e =>{
            n++;
            frame.style.transform = `rotate(${ n * deg }deg)`;

            // active= 이전단추 액티브값이 0이랑 같으면 len=7값을 넣어준다.
            (active == 0) ? active = len : active--;
            activation(active,lists);
        });

        //다음 단추를 클릭했을 경우
        btnNext.addEventListener("click",e=>{
            n--;
            frame.style.transform = `rotate(${ n * deg }deg)`;

            //삼항연산, ?가 if문을 대신한다.
            (active == len) ? active = 0 : active++;
            activation(active,lists); //함수호출
            // 인덱스 값이 없으므로 active값을 바꾸어서 사용
        });

속도를 넣어 자연스럽게 넘어가도록한다.

오디오 넣기

 // frame 밑에 audio가 8개있기때문에 querySelectorAll 사용
        const audio = frame.querySelectorAll("audio");

모든 오디오요소를 정지시키고 pic요소의 모션을 중지해서 초기화하는 함수를 사용해야함

      function initMusic(){
            for(let el of audio){
                el.pause(); //정지
                el.load //불러오기
                el.parentElement.previousElementSibling.classList.remove("on");
            }
        }

initMusic();을 복사해서 이전단추, 다음단추에 붙여넣기한다.

단추를 클릭할때마다 초기화해주는 것이다.

 function initMusic(){
            for(let el of audio){
                el.pause(); //정지
                el.load //다시 불러오기
                el.parentElement.previousElementSibling.classList.remove("on");
            }
        }

        //이전 단추를 클릭했을 경우
        btnPrev.addEventListener("click",e =>{
            initMusic();
            n++;
            frame.style.transform = `rotate(${ n * deg }deg)`;

            // active= 이전단추 액티브값이 0이랑 같으면 len=7값을 넣어준다.
            (active == 0) ? active = len : active--;
            activation(active,lists);
        });

        //다음 단추를 클릭했을 경우
        btnNext.addEventListener("click",e=>{
            initMusic();
            n--;
            frame.style.transform = `rotate(${ n * deg }deg)`;

            //삼항연산, ?가 if문을 대신한다.
            (active == len) ? active = 0 : active++;
            activation(active,lists); //함수호출
            // 인덱스 값이 없으므로 active값을 바꾸어서 사용
        });