BOM -인터벌예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h2 style = "text-align: center;">active클래스를 옮겨가면서 활성화 시키기 vs 하나씩 생성하기</h2>

    <div class = "box">
        <img src="img/KakaoTalk_20240205_094041866_00.jpg">
    </div>


    <script>
        var box = document.querySelector(".box");


        var num = 0;
        function imgChange() {
            //5초마다 실행시킬 코드를 작성

            var img = document.createElement("img");
            img.src= "img/KakaoTalk_20240205_094041866_0"+ ++num + ".jpg";

            box.appendChild(img);

            box.firstElementChild.remove(); //첫 째 자식 삭제

            if(num==3){
                num = 0;
            }

        }

        setInterval(imgChange , 1000);
    </script>


</body>
</html>

1초마다 순서대로 이미지가 넘어간다.

애니메이션 추가하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes fadeIn {
            from {
                opacity : 0;
            }to {
                opacity: 1;
            }
        }
        .bgImg {animation: fadeIn 1.5s linear;}
    </style>
</head>
<body>
    
    <h2 style = "text-align: center;">active클래스를 옮겨가면서 활성화 시키기 vs 하나씩 생성하기</h2>

    <div class = "box">
        <img src="img/KakaoTalk_20240205_094041866_00.jpg" class = "bgImg">
    </div>


    <script>
        var box = document.querySelector(".box");


        var num = 0;
        function imgChange() {
            //5초마다 실행시킬 코드를 작성

            var img = document.createElement("img");
            img.src= "img/KakaoTalk_20240205_094041866_0"+ num++ + ".jpg";
            img.classList.add("bgImg"); //애니메이션효과

            box.appendChild(img);

            box.firstElementChild.remove(); //첫 째 자식 삭제

            if(num==3){
                num = 0;
            }

        }

        setInterval(imgChange , 1500);
    </script>


</body>
</html>

keyframes

클래스명(animation : 이름 시간 효과)

classList.add(클래스명)

을 넣어주며 애니메이션 추가

'JS > JS-event' 카테고리의 다른 글

BOM - timeout (0)	2024.02.05
요소생성 - 노드생성 및 추가 (0)	2024.02.05
BOM (인터벌) (0)	2024.02.05
JS 실습 - 버튼으로 css style 속성 변경하기 (0)	2024.01.29
JS 실습 - onchange , onkeyup (0)	2024.01.29