JS setInterval 실습

JS setInterval 실습 ( 사진 슬라이드하기)

setinterval을 활용한 실습

• slideImg의 css에 animation과 display:none을 적용해두고
• active에는 display:inline을 적용함으로
• 둘다 적용된 이미지는 display가 덮어지는 효과를 낼 수 있다.
• 자바스크립트로 setInterval을 사용해 매초 active 클래스를 옮겨주는것으로
• 사진이 계속 animation이 나오는 효과를 볼 수 있다.

CSS

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .slideImg {
        animation: fadeIn1 0.5s ease-in-out;
        display: none;
    }
    .slideImg.active {
        display: inline;
    }
    @keyframes fadeIn1 {
        from {
            opacity: 0;
            margin-left: -300px;
        }
        to {
            opacity: 1;
            margin-left: 00px;
        }
    }
</style>

HTML

<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되어야 합니다.</h3>

    <div class="slide">
        <img src="img/slide1.jpg" class="slideImg active">
        <img src="img/slide2.jpg" class="slideImg ">
        <img src="img/slide3.jpg" class="slideImg ">
        <img src="img/slide4.jpg" class="slideImg ">
    </div>

JavaScript

<script>
        
        var slideImg = document.querySelectorAll(".slideImg");
        window.setInterval(change, 1000);
        var i = 0;
        function change() {
            slideImg[i].classList.remove("active");
            i++;
            if(i==4) i=0;
            slideImg[i].classList.add("active");
        }
    </script>