슬라이드 기능이 있는 코드 작성하기

슬라이드 기능이 있는 코드 작성하기

슬라이드 기능이 있는 코드를 작성하시려면, 다음과 같은 코드를 사용할 수 있습니다.

html 코드

<!-- HTML -->
<div class="slider">
  <div class="slide"><img src="/#" alt="image1"></div>
  <div class="slide"><img src="/#" alt="image2"></div>
  <div class="slide"><img src="/#" alt="image3"></div>
</div>

css 코드

/* CSS */
.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 600px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

.slide.active {
  opacity: 1;
}

javaScript code

// JavaScript
// 슬라이드 요소들을 선택
var slides = document.querySelectorAll(".slide");

// 현재 슬라이드 인덱스를 저장할 변수
var currentIndex = 0;

// 슬라이드를 변경하는 함수
function changeSlide() {
  // 현재 슬라이드에 active 클래스를 제거
  slides[currentIndex].classList.remove("active");
  
  // 현재 인덱스를 증가시키고, 마지막 인덱스를 넘으면 처음으로 돌아감
  currentIndex++;
  if (currentIndex > slides.length - 1) {
    currentIndex = 0;
  }
  
  // 새로운 슬라이드에 active 클래스를 추가
  slides[currentIndex].classList.add("active");
}

// 일정한 간격으로 슬라이드를 변경하는 타이머 설정
var timer = setInterval(changeSlide, 2500);

JavaScript의 setInterval 함수는 일정한 시간 간격으로 함수나 코드를 반복적으로 실행하는 함수입니다. 이 함수는 실행할 함수와 시간 간격을 밀리초 단위로 입력받으며, intervalID라는 고유한 값을 반환합니다.

이 값은 clearInterval 함수에 전달하여 반복 작업을 종료할 수 있습니다. 예를 들어, 다음과 같은 코드는 1초마다 hello라고 출력합니다.

예제코드

// 실행할 함수
function sayHello() {
  console.log("hello");
}

// 1초마다 sayHello 함수를 실행하고 intervalID를 저장
var intervalID = setInterval(sayHello, 1000);

// 5초 후에 intervalID를 종료
setTimeout(function() {
  clearInterval(intervalID);
}, 5000);