이번에는 JavaScript를 사용하여 웹 페이지에 이미지 슬라이드쇼에 자동으로 전환되는 기능을 추가하는 방법에 대해 알아보겠습니다.

HTML

일단, HTML에서는 이미지를 표시하기 위해 img 태그를 사용하여 이미지를 추가합니다. 이미지 슬라이드쇼를 표현하기 위한 부분에는 id나 class를 추가하여 JavaScript에서 제어할 수 있게 합니다.

<div class="slideshow">
  <img class="slide" src="image1.jpg" />
  <img class="slide" src="image2.jpg" />
  <img class="slide" src="image3.jpg" />
</div>

JavaScript

자동으로 이미지가 슬라이드되는 기능을 추가하기 위해 JavaScript를 사용합니다.

let currentSlide = 0;
const slides = document.querySelectorAll('.slideshow .slide');
const slideCount = slides.length;

function nextSlide() {
  slides[currentSlide].style.display = 'none';
  currentSlide = (currentSlide + 1) % slideCount;
  slides[currentSlide].style.display = 'block';
}

// 3초마다 다음 이미지로 전환
setInterval(nextSlide, 3000);

위의 코드에서는 setInterval을 사용하여 3초마다 nextSlide 함수가 호출되도록 설정했습니다. nextSlide 함수는 현재 이미지를 숨기고, 다음 이미지를 표시하도록 구현되어 있습니다.

결과 확인

이제 브라우저에서 웹 페이지를 열어 자동으로 이미지가 슬라이드되는 기능을 확인할 수 있습니다.

위 방법을 통해 JavaScript를 이용하여 이미지 슬라이드쇼를 자동으로 전환되도록 할 수 있습니다.

참고 자료

• MDN Web Docs - setInterval
• w3schools - JavaScript SlideShow