[ jQuery ] 슬라이드 - 자동실행 : setInterval, clearInterval

setInterval

일정시간 간격으로 슬라이드 이미지를 자동으로 넘어가게 하고 싶을 때, 또는 움직이는 애니메이션을 구현하고 싶을 때 처럼 콜백함수를 주기적으로 실행하는 함수가 setInterval이다.

• 기본구성 setInterval(function(){},시간간격);

clearInterval

현재 진행되는 함수의 진행을 멈추는데 사용된다.

• 기본구성 clearInterval(함수명);
  
  

주기적으로 움직이는 상자 만들기

<script>
       $(function(){
       
            let intervalID = "";

            $('.start').on('click',function(){
                clearInterval(intervalID);  
                //기존 인터벌 중지 : 버튼 누를때마다 함수가 실행되어 intervalID 값이 올라가기 때문에 미리 적어놓을 것.

                intervalID = setInterval(function(){
                    $('.box').stop().animate({left:700}).animate({left:0});
                },2000);  //2초 간격으로 함수 실행 
            });

            $('.stop').on('click',function(){
                clearInterval(intervalID);  
            });
        });
</script>

주의할 점은, 박스의 위치를 position:absolute 해서 지정해야 위 함수가 실행된다!

슬라이드배너 [ indicator + 이전,다음버튼 + 자동실행하기 ]

<script>
$(function(){

    const $indicator = $('.slides>.slides-pagination>li>a');
    const $container = $('.slides>.slides-container');
    const $btnNext = $('.next');
    const $btnPrev = $('.prev');
    let nowIdx = 0;

    //활성화,컨테이너이동 함수 선언!!
    function moveFn(){
        
        //활성화표시 on 
        $indicator.eq(nowIdx).parent().addClass('on').siblings().removeClass('on');

        //컨테이너 이동 
        $container.stop().animate({left:-1180 * nowIdx},400,"easeInOutCubic",function(){console.log("슬라이드 이동 완료"); });

    }


    $indicator.on('click',function(evt){

        nowIdx = $indicator.index(this);

        moveFn();
        evt.preventDefault();

    });


    //indicator를 눌렀을 때는 해당 a에 클래스를 옮겨주면 되고,
    //이전,다음 버튼은 indicator식을 이용해 index를 증감시켜주면 된다. 

    $btnNext.on('click',function(evt){

        if(nowIdx<=3){
            nowIdx++;
        }else{
            nowIdx=0;
        }

        moveFn();
        evt.preventDefault();

    });

    $btnPrev.on('click',function(evt){

        if(nowIdx>=1){  //1보다 같거나 크다 = 1~4 
            nowIdx--;
        }else{          //0
            nowIdx=4;
        }

        moveFn();
        evt.preventDefault();
    });


    //슬라이드 자동실행 = 시간간격 설정 
    interverID = setInterval(function(){

        if(nowIdx<=3){
            nowIdx++;
        }else{
            nowIdx=0;
        }

        moveFn();
    },2000); //2초간격으로 슬라이드 이동 

});
</script>