이번 포스트에서는 자바스크립트 Local Storage를 이용하여 간단한 사진 슬라이드쇼를 구현하는 방법에 대해 알아보겠습니다. 사진 슬라이드쇼는 여러 장의 이미지를 일정한 간격으로 자동으로 전환하여 보여주는 기능을 말합니다.

HTML 구조

먼저, 사진 슬라이드쇼를 보여줄 HTML 구조를 생성합니다. 다음은 간단한 예시입니다.

<div class="slideshow-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

위의 코드에서 .slideshow-container는 슬라이드쇼를 감싸고 있는 부모 요소입니다. 이미지는 <img> 태그를 사용하여 표시되며, src 속성으로 이미지 파일 경로를 지정할 수 있습니다.

자바스크립트 구현

이제 자바스크립트를 사용하여 사진 슬라이드쇼를 구현해보겠습니다. Local Storage를 사용하여 슬라이드쇼의 현재 이미지 인덱스를 저장하고, 일정한 간격으로 이미지를 변경하는 기능을 추가할 것입니다.

// 슬라이드쇼 요소들을 변수에 참조합니다.
const slideshowContainer = document.querySelector('.slideshow-container');
const images = Array.from(slideshowContainer.getElementsByTagName('img'));

// Local Storage에서 현재 이미지 인덱스를 가져옵니다.
let slideIndex = parseInt(localStorage.getItem('slideIndex')) || 0;

// 이미지를 변경하는 함수를 정의합니다.
function showSlide(index) {
  // 현재 이미지 인덱스를 Local Storage에 저장합니다.
  localStorage.setItem('slideIndex', index);

  // 모든 이미지를 숨깁니다.
  images.forEach(image => image.style.display = 'none');

  // 현재 이미지를 보여줍니다.
  images[index].style.display = 'block';
}

// 초기에 첫 번째 이미지를 보여줍니다.
showSlide(slideIndex);

// 일정한 간격으로 다음 이미지를 보여주는 타이머를 설정합니다.
setInterval(() => {
  slideIndex = (slideIndex + 1) % images.length;
  showSlide(slideIndex);
}, 2000);

위의 코드에서는 슬라이드쇼 요소들을 변수로 참조하고, 현재 이미지 인덱스를 Local Storage에서 가져옵니다. 그리고 이미지를 변경하는 showSlide 함수를 정의하여 현재 이미지를 보여주고, Local Storage에 현재 인덱스를 저장합니다.

마지막으로, setInterval 함수를 사용하여 일정한 간격으로 다음 이미지를 보여주는 타이머를 설정합니다. 위의 예시에서는 2초마다 이미지가 전환되도록 설정하였습니다.

결론

위의 코드를 사용하여 자바스크립트 Local Storage를 이용한 간단한 사진 슬라이드쇼를 구현할 수 있습니다. 슬라이드쇼 요소들을 가져오고, 현재 이미지 인덱스를 Local Storage에서 관리하여 원활한 이미지 전환을 구현할 수 있습니다. 이를 활용하여 웹사이트에 멋진 사진 슬라이드쇼를 추가해보세요!

#javascript #localstorage #사진슬라이드쇼