[Javascript]이미지 반복

HSGemini·2021년 5월 17일
0

javascript

목록 보기
2/3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Animation</title>
    <script>
        window.onload = function() {
            //변수를 선언합니다.
            var count = 0;
            var image = document.getElementById('image');
            var frames = [
                '7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png'
            ];
            //타이머 반복을 시작합니다.
            setInterval(function() {
                //  일정한 시간 간격으로 작업을 수행
                image.src = "../animation/" + 
                         frames[count % frames.length];
                count = count +1;

            }, 1000/20);
        };
    </script>



</head>
<body>
<img id = "image" />
</body>
</html>

profile
공부중

0개의 댓글