[Javascript] 이미지슬라이드 버튼 만들기

 

오늘은 버튼을 누르면 이미지가 바뀌는 것을 만들어보았다.

 

 

1. html

    <button onclick="prev();">이전</button>
    <img id="imgSlide" src="./img/banner01.jpg" width="300" height="300" alt="물감칠한사진">
    <button onclick="next();">다음</button>

 

 

2. script

   <script>
        let imgSlide = document.querySelector("#imgSlide");
        let imgList = ["./img/banner01.jpg","./img/ban02.jpg","./img/ban03.jpg"];
        let i = 0;

        function prev(){ // 이전
            i--;
            imgSlide.src = imgList[i];
            if(i<0){
                i = imgList.length-1;
                imgSlide.src = imgList[i];
            }
        }

        function next(){ // 다음
            i++;
            imgSlide.src = imgList[i];
            if(i >= imgList.length){
                i = 0;
                imgSlide.src = imgList[i];
            }
        }
    </script>

 

document.querySelector 말고 document.getElementById를 써도 된다.

근데 document.getElementsByClassName을 쓰면(img태그에도 class로 바꾸고)

안되던데 이유는 공부중이라 아직 모르겠다

(아시는분 댓글 부탁드립니다)