JavaScript 코드 설명

이 코드가 하는 일과 작동 방식을 설명해 주시겠어요?

let currentSlide = 0;

function showSlide(index) {
  const slidesWrapper = document.querySelector('.slides-wrapper');
  const slides = document.getElementsByClassName("slide");

  if (index >= slides.length) currentSlide = 0;
  if (index < 0) currentSlide = slides.length - 1;

  slidesWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
}

function nextSlide() {
  currentSlide++;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide--;
  showSlide(currentSlide);
}

window.onload = function() {
  showSlide(currentSlide);
  setInterval(nextSlide, 3000);
};

안녕하세요. 이 JavaScript 코드는 간단한 슬라이드쇼를 만듭니다. 구체적으로 살펴보겠습니다.

1. currentSlide = 0;: 현재 표시된 슬라이드를 추적하는 변수를 초기화합니다. 0 (첫 번째 슬라이드)에서 시작합니다.

2. showSlide(index): 핵심 함수입니다. 표시할 슬라이드를 나타내는 index를 사용합니다.

   • document.querySelector('.slides-wrapper'): 모든 슬라이드의 컨테이너 요소 (아마도 'slides-wrapper' 클래스의 <div>)를 가져옵니다.
   • document.getElementsByClassName("slide"): 'slide' 클래스가 있는 모든 요소(아마도 개별 슬라이드)를 가져옵니다.
   • if (index >= slides.length) currentSlide = 0;: 색인이 범위를 벗어나면 (슬라이드 수보다 크거나 같음) 첫 번째 슬라이드 (색인 0)로 돌아갑니다.
   • if (index < 0) currentSlide = slides.length - 1;: 마찬가지로 색인이 0보다 작으면 마지막 슬라이드로 돌아갑니다.
   • slidesWrapper.style.transform =translateX(-${currentSlide * 100}%);: 키 라인입니다. CSS 변환을 사용하여 slides-wrapper 요소를 가로로 이동합니다. 각 슬라이드는 컨테이너 너비의 100% 로 가정됩니다. currentSlide를 100% 로 곱하면 컨테이너가 왼쪽으로 이동하여 적절한 슬라이드가 표시됩니다.

3. nextSlide(): 이 함수는 currentSlide을 증가시키고 showSlide()를 호출하여 다음 슬라이드를 표시합니다.

4. prevSlide(): 이 함수는 currentSlide를 감소시키고 showSlide()를 호출하여 이전 슬라이드를 표시합니다.

5. window.onload = function() { ... }: 이렇게 하면 전체 페이지가 로드된 후에 코드가 실행됩니다.

   • showSlide(currentSlide);: 처음에는 첫 번째 슬라이드가 표시됩니다.
   • setInterval(nextSlide, 3000);: 3,000밀리초 (3초)마다 nextSlide()를 자동으로 호출하는 간격을 설정하여 자동 슬라이드쇼 효과를 만듭니다.

기본적으로 이 코드는 CSS 변환을 사용하여 슬라이드 간에 원활하게 전환하고, 래핑 동작과 자동 슬라이드 진행을 처리합니다. 컨테이너 요소와 슬라이드 요소가 있는 특정 HTML 구조를 가정합니다. HTML은 다음과 같이 표시될 수 있습니다.

<div class="slides-wrapper">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>