slider - pause/play btn

사실 두 버튼을 하나로 합치고 싶었는데 그렇게 되면 if문부터 너무 복잡해 질 것 같아서 그냥 단순하게 버튼 두개 만들고 함수를 두개 만들어서 onclick으로 실행했다.

 

PAUSE BUTTON

function pauseBtn(){
    clearInterval(rolling);
}

진짜 최고로 간단. 그냥 버튼 눌렀을때 interval 전체를 멈춰버리면 된다.

 

PLAY BUTTON

function playBtn(){
    var type;
    var newIndex;
    slider(type,index,newIndex);
    rolling = setInterval(slider,5000);    
}

얘도 사실 엄청나게 간단하다,,, type이랑 newIndex변수 선언해주고 그대로 slider 함수 실행시켜준다음 setInterval 실행,,,, 위에서 pause 버튼으로 interval을 clear해놨기 때문에 다른건 필요없었다.

 

>> 두개 하나로 만드는거 성공!!

일시정지 버튼을 함수로 선언해주고 함수로 선언하면서 pause class를 querySelector로 불러아줬다.

그리고 함수안에 if문을 사용했는데 if문을 사용하기 위해서 html에서 임의로value를 설정해줬다. if문에서 value가 누르기전 value와 같을때,라는 설정값을 주고 그 안에 clearInterval을 한번 실행시킨다음 setAttribute로 pause의 value값을 다른 값으로 변경시켰다. 그리고 value가 첫번째와 같지않다면 else안에서 위에서 사용했던 것과 똑같이 필요한 변수를 선언해주고 그 변수가 인자값으로 들어간 함수를 실행시켜주면서 아까 clear되었던 interval을 똑같이 다시 실행시켜줬다.

이렇게 되면

1. 일시정지 버튼 >> onlick으로 함수 발동.

2. 버튼의 value값으로 일시정지일때, 아닐때를 구분한다.

3. 일시정지가 아닌(value값이 같은) 상태에서 버튼을 누르면 두가지가 작동된다:

           a. 지금까지 돌아가던 interval이 없어지고

           b. 버튼의 value값이 변한다. (일시정지)

4. 일시정지가 된 버튼의 value와 조건문의 value가 달라짐으로 일시정지 버튼은 누르면:

           a. slider함수가 다시 실행된다.

           b. setInterval도 다시 실행된다.

pause = document.querySelector('.pause');

function pauseBtn(){
    if(pause.value  == "1"){
        clearInterval(rolling);
        pause.setAttribute('value','p');
        console.log(pause.value);   
    } else{
        var type;
        var newIndex;
        slider(type,index,newIndex);
        rolling = setInterval(slider,5000);
    }
}

 

var index = 0;
var rolling = null;
slider();

function slider(type,currentIndex,newIndex){
    flag = true;
    li = document.querySelectorAll('.interview_content > li');
    intBtn = document.querySelectorAll('.interview_content > a')
    if(index == li.length){     // if ('code') 비교 연산자 [true false]
        index = 0;
    }

    if (type != undefined){
        flag = false;
    } 

    for(i=0; i < li.length; i++){
        var onNum = index+1;        //index+1 이 4를 넘어가면 0으로 초기화 한다.
        if(onNum== 4){
            onNum = 0;
        }

        if (type == 0 ) {
            if (i == currentIndex) {
                li.item(i).setAttribute('class', 'out2');
            } else if (i == newIndex) {
                li.item(i).setAttribute('class', 'on2');
            } else {
                li.item(i).setAttribute('class', '');
            }
        } else {
            if(i == index){
                li.item(i).setAttribute('class','out');
            }else if(i == onNum){
                li.item(i).setAttribute('class', 'on');
            }else{
                li.item(i).setAttribute('class', ' ');
            }
        }
    }
    
    if(flag){
        index ++; 
    } else {
        index = newIndex;
    }
       
}

function interviewBtn(type){
    console.log(index);
    var newIndex;
    if (type == 0) {
        newIndex = index - 1;
        if (newIndex == -1) { newIndex = 3; }
        console.log('이전 인덱스값' + newIndex,'현재인덱스값 '+index);
    } else if (type == 1) {
        newIndex = index + 1;
        if (newIndex == 4) { newIndex= 0; }
        console.log('다음 인덱스값' + newIndex,'현재인덱스값 '+index);
    }

    clearInterval(rolling);
    slider(type,index,newIndex);
    rolling = setInterval(slider,5000);    
}

rolling = setInterval(slider,5000);

function pauseBtn(){
    clearInterval(rolling);
}

function playBtn(){
    var type;
    var newIndex;
    clearInterval(rolling);
    slider(type,index,newIndex);
    rolling = setInterval(slider,5000);    
}