[Javascript] 이미지 랜덤 슬라이드

 

 

오늘은 랜덤 이미지가 자동으로 나가는 이미지 슬라이드를 만들었다.

 

1. html

    <img src="./img/ban01.jpg" alt="" id="Slide" width="600" height="600">

 

 

2. css

    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width:100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

 

100vh의 vh는 viewport의 높이에 근거한다. 1vh는 viewport의 높이의 1%와 같다.

100vh는 viewport 높이 전체를 의미한다. 100%와 다른점은 

100vh를 하면 스크롤이 생기지만 100%는 스크롤이 생기지않는다.

 

justify-content:center 는 수평방향에서 중앙, align-item:center 는 수직방향에서 중앙이다

display:flex를 쓰고 justify-content와 align-item를 쓴다.

 

 

3. script

    <script>
        let slide = document.getElementById("Slide");
        let imgArr = ["./img/ban01.jpg", "./img/ban02.jpg", "./img/ban03.jpg"];

        setInterval(()=>{
            let ranNum = Math.floor(Math.random() * imgArr.length);
            slide.src= imgArr[ranNum];
        },2000);

    </script>

 

document로 아이디가 Slide인 img 태그를 slide 변수로 선언한다.

imgArr 는 랜덤으로 사용할 이미지들을 배열에 넣는다.

 

자동으로 이미지를 바꿔주기 위해

setInterval 함수를 사용하며 ()=> 는 애로우함수며 function() 와 같다.

아무거나 써도 되지만 공부를 하며 여러 함수들을 쓰고자하여 애로우함수(화살함수)를 써보았다.

 

imgArr 인덱스는 0, 1, 2 이며 세 숫자를 랜덤으로 돌리기위해

ranNum 변수를 선언하여 Math.random 으로 랜덤이 되도록 하였다.

imgArr.length는 imgArr의 길이이며 3이다.

random()* 3 하면 0 ~ 2까지의 랜덤 난수를 생성한다

 

slide(img 태그).src 에 imgArr[랜덤숫자] 를 넣는다.

만약 랜덤숫자가 0이라면

<img src="./img/ban01.jpg" class="Slide"> 이 된다.

 

 

결과

2초마다 랜덤으로 이미지가 바뀌는 슬라이드