성장을 위한 기록

js. slideimage (슬라이드 이미지) 본문

FE (Front End) (구)/javascript

js. slideimage (슬라이드 이미지)

B_Tae 2022. 2. 15. 23:05

버튼 클릭 시 이동하는 슬라이드 이미지

let slideImage =  document.querySelectorAll("#slideImage > img"); //이미지 가져오기 
let prev = document.getElementById("prev"); // 이전 버튼 가져오기
let next = document.getElementById("next"); // 다음 버튼 가져오기
let current = 0;

prev.onclick = prevSlide; // 이전 버튼 클릭 시 함수 실행
next.onclick = nextSlide; // 다음 버튼 클릭 시 함수 실행

function changeSlide(n){ 
  for( let i = 0 ; i < slideImage.length; i++){
    slideImage[i].style.display = "none"; // 반복문을 통해 모든 이미지 none
  }
  slideImage[n].style.display = "block"; // 해당 값에 이미지 block
}

function prevSlide(){
  if(current > 0){ // 현재 이미지가 처음이 아니라면
    current -= 1;  // 현재 이미지에서 -1로 이동
  }else{
    current = slideImage.length - 1; // 현재 이미지가 처음이라면 마지막 이미지로 이동
  }
  changeSlide(current); // 함수 실행
}

function nextSlide(){
  if(current < slideImage.length - 1){ // 현재 이미지가 마지막이 아니라면
    current +=1;     // +1 이미지로 이동
  }else{
    current = 0;   // 마지막이라면 처음 이미지로 이동
  }
  changeSlide(current);  // 함수 실행
}
Comments