사이트 내 전체검색

Javascript

이미지 2개 페이드 되면서 변환

페이지 정보

작성자 허니무스 댓글 0건 조회 176회 작성일 23-04-14 15:58

본문

Image 1
Image 2

이미지 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>


댓글목록

등록된 댓글이 없습니다.


CE.M
Copyright © calcevery.me. All rights reserved.
login