이미지 2개 페이드 되면서 변환
페이지 정보
작성자 허니무스 댓글 0건 조회 358회 작성일 23-04-14 15:58본문
이미지 2개가 페이드 되면서 변환되는 소스
<div class="slideshow-container" style="width:100px;"> <div class="slideshow-image fade"> <img src="/img/cat_640.jpg" alt="Image 1"> </div> <div class="slideshow-image fade"> <img src="/img/puppy_640.jpg" alt="Image 2"> </div> </div> <style type="text/css"> .slideshow-container { position: relative; width: 100%; height: 500px; } .slideshow-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow-image.fade { opacity: 1; } </style> <script> const slides = document.querySelectorAll('.slideshow-image'); let currentSlide = 0; function showSlide() { slides[currentSlide].classList.remove('fade'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('fade'); } setInterval(showSlide, 3000); </script>
댓글목록
등록된 댓글이 없습니다.