[Javascript] 이미지 슬라이드 만들기( setInterval, setTimeout, querySelectorAll, onClick, clearInterval)

목차

- setInterval

- setTimeout

- querySelectorAll

- onClick

- clearInterval

- 

 

 

 

setInterval

 

매 초마다 같은 동작을 실행하고 싶을 때 사용한다.

ex) 1초마다 1을 찍고싶다.

첫번째 인자 값은 콜백함수를 넣는다.

 

두번째 인자 값은 시간을 넣어주면 된다. 1000 = 1s

 

        setInterval(podo, 1000)
        function podo(){
            console.log(1)
        }
        
        //1초마다 1이 출력됨

 

 

setTimeout

 

내가 실행하고 싶은 시간을 설정값에 따라 실행한다.

 

setTimeout(podo, 1000) 
//1초 후에 딱한번 실행하겠다는 뜻이다

 

아래의 출력 결과는?

 

        console.log(4)
        console.log(3)
        setTimeout(podo,1000) // 얘는 0이어도 4 3 2 1 찍히고 나중에 찍힌다. 이유?
        // 코드가 처리되는 영역이 다르다. 테스크 큐(Task Queue에서 처리)
        console.log(2)
        console.log(1)

 

4

3

2

1

1(podo의 1)

 

코드가 처리되는 영역이 다르기 때문이다. 테스크 큐(Task Queue에서 처리)

 

 

        //1초마다 1씩 증가하는 값을 출력하는 것 만들기.
        //1초마다 출력을 해보자.
        //set interval을 사용해야함

        setInterval(call, 1000)
        function call(){
            console.log('hello world')
        }
        
        //1초마다 증가???
        let i =0;
        setInterval(call, 1000)
        function call(){
            console.log(i)
            i++
        }
        //1초마다 1씩 증가하는데 0부터 3만 반복해서 나오게하기

        let i = 0;
        setInterval(call,1000)
        function call(){
            if(1 == 4){
                i = 0
            }
            console.log(i)
            i++
        }

querySelectorAll

DOM 조작

querySelectorAll() : 요소 모두를 배열로 담아 가지고 오고 싶을 때 사용한다.

 

 

onClick

 

사용자가 요소를 클릭할 때 발생한다.

 

<button onClick="myFunction()">Click me</button>
//onclick="실행할 함수"

 

clearInterval

 

setInterval의 반복을 중단하는 메서드이다.

 

여태껏 배운 것들을 활용하여 이미지 슬라이드를 만들어보자.

 

 

 

1) body 영역에 ul태그를 추가해서 li를 4개 만들어주겠다.

    <ul id="visual">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
    <button id="sildeBtn" onclick="clickHandler(1)">1</button>
    <button id="sildeBtn" onclick="clickHandler(2)">2</button>
    <button id="sildeBtn" onclick="clickHandler(3)">3</button>
    <button id="sildeBtn" onclick="clickHandler(4)">4</button>
    
    //4개의 버튼 추가 (누를때마다 슬라이드가 멈춤)

2) css 를 적용하여 배경 4개를 각기 다른 색으로 겹쳐서 표현해보겠다.

 

<style>
        *{margin: 0; padding: 0;}
        ul,li{list-style: none;}
        #visual {
            width: 100%;
            height: 300px;
            position: relative;
        }
        #visual > li{height: 300px;
        position: absolute; width: 100%;
        left: 100%;
        transition: all 0.5s;

        }

        #visual > li.on{
            left: 0px;
        }

        #visual > li:nth-child(1) {background: red;}
        #visual > li:nth-child(2) {background: orange;}
        #visual > li:nth-child(3) {background: yellow;}
        #visual > li:nth-child(4) {background: green;}
        
    </style>

3) 자바스크립트

 

body html 코드 밑에 바로 script 작성

 

3-1)  bannerImgs라는 배열에 document.querySelectorAll을 사용해 id가 visual인 ul태그 안에 있는 li를 모두 차례로 담는다. console.log로 찍어보면 길이가 4인 배열이 출력됨을 확인할 수 있다.

 

3-2) setInterval를 이용해 banner라는 함수를 1초에 한번씩 반복하는 메서드를 interval이라는 변수에 저장한다.

 

3-3) banner라는 함수를 인자값을 1로하고 실행한다. --> 첫번째

 

구현하려는 것: i가 0~3을 반복하며 무한정으로 돌아간다.

 

i는 0으로 초기값을 설정해두었다. 만약 i가 1씩 커져 4에 도달하게된다면, i를 다시 0으로 초기화 시켜준다.

 

3-4) 만약 n이(뒤에 나오는데, n은 bannerImg배열의 인덱스 +1값임, ) undefined라면 (n 값이 있는 경우는 클릭이벤트가 이루어졌을 때만) 자동으로 돌아가고 있다는 뜻이다. 따라서 그 경우가 아닌경우, 즉 n값이 있을 때(사용자가 직접 클릭을 했을 때) n-1을 해주어 배열의 인덱스 값을 구해준다.

<script type="text/javascript">
        let bannerImgs = document.querySelectorAll('#visual > li') // (1번)
        console.log(bannerImgs) 
        

        let i=0;  				// (2번)
        let interval = setInterval(banner, 1000)
        banner(1)				//(3번)
        function banner(n){              
            if (i==4){
                i = 0;
            }

            if (n== undefined){				//(4번)
                //setInterval로실행할경우

            } else{
            
                //직접실행할때, 직접 클릭할 때
                i = n-1
            }
            for(let j=0; j<bannerImgs.length; j++){         //(5번)
                if(i == j){
                    bannerImgs[j].setAttribute('class', "on")

                } else {bannerImgs[j].setAttribute('class', '')
            }
            }
            i++                  //(6번)
        }

3-5) 배열의 길이만큼 반복문을 돌리면서, 클릭한 배열 인덱스만 class 값을 on으로 지정해주고, 나머지는 다 없앤다.

 

3-6) i값을 +1한다. = 다음 이미지로 넘어간다.

 

4) 버튼을 클릭했을 때 잠깐 멈추게 하기

        //클릭했을 때 슬라이드 멈추게 하기
        
        //clearInterval() // 이녀석이 설정된 애를 지우는 역할을 해주는 함수 인자 값

        // let btn = document.querySelector('#sildeBtn') // onClick을 사용하지 않으면
        // btn.addEventListener('click', clickHandler) // 이 주석처리 된 두코드를 많은 반복을 해야한다. 
        function clickHandler(n){
            clearInterval(interval)
            banner(n)
            interval = setInterval(banner,2000)
        }

n값이 들어오면 clearinterval을 통해 잠시 반복(다음 이미지로 넘어가는 것)을 멈춘다.( interval 값을 없앤다!)

 

그리고, banner 를 실행하고 interval 안에 setInterval을 재할당해준다. 2000 =2초 멈추겠다. 3000= 3초멈추겠다.