[JavaScript] next, prev 버튼을 이용하여 사진 넘기기.

버튼을 통해서 사진을 전환할 수 있는 JS 코드에 대한 이해.

1. 요소 선언

var slides = document.querySelectorAll("#slides > img");

이미지 요소를 querySelectiorAll 을 이용하여 NodeList로 저장함.

// 이때 CSS코드에서 이미지 요소들을 absolute로 해둘 것. (이미지요소들의 부모는 relative로 설정) 

var prev = document.getElementById("prev");

var next = document.getElementById("next");

이전 버튼과, 이후 버튼을 만든 후 getElementId를 통해서 가져옴.

 

2. current라는 변수 생성하기

0이라는 숫자일 때, 1번째 사진을.

1이라는 숫자일 때, 2번째 사진을. 이런식의 접근을 위해서 current라는 변수를 생성하고자함.

 

처음에는 0으로 초기화 해둘것. 

var current = 0;

 

 

3. 버튼을 클릭할 시, 함수가 호출되도록 하기.

showSlides(current);

showSlides 함수에 변수 current 넣기.

prev.onclick = prevSlide;

prev라는 버튼을 클릭시 prevSlide 함수 호출

next.onclick = nextSlide;

 

prev라는 버튼을 클릭시 prevSlide 함수 호출

 

 

4. 그 다음은 showSlides 라는 함수 만들기

function showSlides(n) {

  for (let i = 0; i < slides.length; i++) {

    slides[i].style.display = "none";

  }

  slides[n].style.display = "block";

}

함수를 설명하자면,

이미지 nodeList인 slides들을 for문을 통해 아예 안보이게 먼저 설정을 함.

slides.length를 하면 이미지 요소의 개수만큼 for문을 돌게됨.

 

for 문을 통해서 모든 요소들이 안보이게 설정이 되었다면, 그 후에는 current값인 n번째 요소가 보이게끔 "block" 해준것.

 

5. prevSlide 함수 만들기 

prevSlide  함수는 위에서 보다시피, prev 버튼을 클릭하게 될 시 호출되는 함수임.

function prevSlide() {

  if (current > 0) current -= 1;

  else

    current = slides.length - 1;

   showSlides(current);

}

여기서 생각하여야 할 부분은 0보다 이전 값을 어떻게 설정할것인가임. 

일단 여기 코드에서는 0에서 이전 사진을 호출하게되면 마지막 요소의 사진을 보여주는 형식으로 갈거임.

그러면 0 보다 큰 경우는 currnet의 값에 -1을 하는 식으로 접근 하면 됨.

 그러나 0일 경우에는 ? slides list에서 마지막 값을 current의 값으로 설정해주면 됨.

그런데 length의 경우에는 요소가 4개라면 4라는 값을 줌. 하지만 실제 배열은 0에서부터 시작하니 [4]라고 해버리면 초과된 값으로 에러가 뜰것임. 그리하여 current의 값에 slides.length -1 이라는 값을 할당해주는 것임.

 

마지막은 showSlides(current) 로 해주는 걸루 : >

 

6. nextSlide 함수 만들기

nextSlide  함수는 위랑 똑같이, next 버튼을 클릭하게 될 시 호출되는 함수임.

function nextSlide() {

  if (current < slides.length - 1) current += 1;

  else

    current = 0;

  showSlides(current);  

}

next slide 는 prev랑 반대로 current에 +1을 해줘야함.

그러니까 배열로 줄때 만약 10개 이미지 요소가 있다면 실제 current값은 10이 아닌 9 라는 숫자를 가져야지 마지막 이미지 요소에 도달할 수 있음.

그러니까 실제 10개의 이미지가 있을때,  current는 9라는 값일 때 그것이 마지막 10번째 이미지라고 뜻하기도 함. 

마지막 사진이 아닐 때에는 current 요소에다가 +1을 하고

마지막 값일 때는 current를 0으로 초기화 하는 식으로 코드를 작성해주면 됨.