Auto Gallery

3초마다 사진이 알아서 바뀜

---

HTML

<h1>Auto Gallery</h1>

    <div class="large">
        <img id="main" src="https://cdn.traveltimes.co.kr/news/photo/202305/404834_27302_2359.jpg" alt="">

        <div class="small">
            <img class="thumbnail active" src="https://cdn.traveltimes.co.kr/news/photo/202305/404834_27302_2359.jpg" alt="">
            <img class="thumbnail" src="https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_3000,h_2004,f_auto/w_80,x_15,y_15,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/njtv7x0ggg8th018vinq/%EC%8A%A4%EC%9C%84%EC%8A%A4%EB%B0%98%EC%95%A1%EC%B9%B4%EB%93%9C(%EB%AA%A8%EB%B0%94%EC%9D%BC%ED%8C%A8%EC%8A%A4)-%ED%81%B4%EB%A3%A9Klook%ED%95%9C%EA%B5%AD.jpg" alt="">
            <img class="thumbnail" src="https://static.hanatour.com/product/2019/06/26/0448lzv1xe/default.jpg" alt="">
        </div>
    </div>

CSS

<style>
        * {
            box-sizing: border-box;
        }

        /* main-image */
        .large {
            width: 300px;
            height: 300px;
            position: relative;
        }
        #main {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* thumbnail */
        .small {
            display: flex;
            position: absolute;
            justify-content: center;
            border: 1rem;
            width: 100%;
            bottom: 1rem;
        }
        .thumbnail {
            width: 50px;
            height: 50px;
            object-fit: cover;
        }

        /* toggle */
        .active {
            outline: 4px solid skyblue;
            z-index: 10;
        }
    </style>

JS

<script>
    var thumbnails = document.getElementsByClassName('thumbnail');
    var main = document.getElementById('main');
    var nowIndex = 0;
    var lastIndex = 0;
    console.log(thumbnails)
    console.log(main)

    setInterval(i, 3000);

    function i() {

        nowIndex++;

        console.log(nowIndex)
        console.log(lastIndex)

        if (nowIndex == thumbnails.length) {
            nowIndex=0;
        }

        // 메인 이미지 변경
        main.src = thumbnails[nowIndex].src;

            thumbnails[nowIndex].classList.add('active');
            thumbnails[lastIndex].classList.remove('active');

            lastIndex = nowIndex;
    }
   </script>

---

setInterval()

• 애니메이션과 같이 반복해서 실행되는 함수의 지연을 설정하는 데 사용
• 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우
• 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용

ex) 콘솔에 현재 시간 2초마다 출력하기

setInterval(() => console.log(new Date()), 2000);