2024-10-16

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        //  전역변수 선언
        let img1 = null;
        let count = 0;

        onload = () => {
            init();         //  초기화 시키는 함수
            start();        //  타이머 함수
        }

        //  초기화 시키는 함수
        function init() {
            img1 = document.querySelector("#img1");
        }

        //  타이머 함수
        function start() {
            //  일정한 시간(1초)마다 한 번씩 특정 함수를 호출
            setInterval(changeImage, 1000);
        }

        //  이 곳(함수)에서 이미지를 변경 진행.
        function changeImage() {
            count++;

            //  현제 count 변수 값이 10 이상이면 다시 1로 설정.
            if(count >= 10) {
                count = 1;
            }

            //  이미지 변경
            img1.src = "../images/img" + count + ".jpg"
        }


    </script>
</head>
<body>
    
    <div align="center">

        <h2>이미지를 순차적으로 변경하기</h2>

        <div id="panel">

            <img src="../images/img1.jpg" id="img1" alt="이미지1">

        </div>

    </div>

</body>
</html>

 

'JavaScript > 기초 내용 정리' 카테고리의 다른 글

JavaScript(DOM)_12  (0) 2024.10.16
JavaScript(DOM)_11  (0) 2024.10.16
JavaScript(Function)_09  (0) 2024.10.16
JavaScript(Function)_08  (0) 2024.10.16
JavaScript(Function)_07  (0) 2024.10.16

티스토리툴바