[영화 검색사이트] 상세페이지 개발3 (슬라이드 버튼 이벤트)

출연배우의 리스트를 슬라이드 형태로 보여주는 코드 이다 

 

버튼 이벤트

먼저 left버튼과 right버튼을 만들어서 버튼을 누르면 좌/우로 한칸씩 이동하는 버튼이벤트 이다.

let num = 0;
function leftBtnEvn() {
  num++;
  for (let i = 0; i < actorListLi.length; i++) {
      actorListUl.children[i].style.left = `${(i + num) * 20}%`;
  }
}
function rightBtnEvn() {
  num--;
  for (let i = 0; i < actorListLi.length; i++) {
    actorListUl.children[i].style.left = `${(i + num) * 20}%`;
  }
}

 

먼저 num 이라는 변수에 초기값0을 집어 넣고 left버튼을 누르면 num이 1씩 중가하고 right버튼을 누르면 num이 1씩 감소한다. 

for 을 통해 출연배우 리스트각각의 요소에 left값을 20.%씩중가시키고

(리스트1번은 20%, 리스트2번은 40%, 리스트3번은 60%.........)

거기에 num을 추가로 더해서 버튼을 누를 때 마다. num의 수만큼 리스트가 이동한다.

 

 

 

 

발견된 에러

슬라이드가 끝을 보여주면 클릭 이밴트가 멈추어야 하는데 멈추지 않고 계속 움직인다.

 

해결 

if문으로 조건으로 줘서 리스트의 첫번째요소의 left가 0px인 경우와 마지막 요소의 right가 0px인 경우 슬라이드를 멈추는 조건을 달았다.

 

 

left버튼

function leftBtnEvn() {
  num++;
  for (let i = 0; i < actorListLi.length; i++) {
    if (getComputedStyle(actorListUl.firstChild).left === "0px") {
      num = 0;
    } else {
      actorListUl.children[i].style.left = `${(i + num) * 20}%`;
    }
  }
}

 

 

right버튼

function rightBtnEvn() {
  if (getComputedStyle(actorListUl.lastChild).right >= "0px") {
    return;
  } else {
    num--;
    for (let i = 0; i < actorListLi.length; i++) {
      actorListUl.children[i].style.left = `${(i + num) * 20}%`;
    }
  }
}

 

getComputedStyle()란 해당 돔에 어떤 style이 적용되었는지 보여주는 함수이다

getComputedStyle()통해서 리스트의 첫번째요소와 마지막요소의 left, right값을 구한뒤 left,right가 0px이면 버튼이밴트가 작동을 하지 않는다.

 

2번째 에러 

left버튼은 리스트의 첫번째 요소가 left 0px일때 num을 0으로 만들어서 해결했는데 right버튼은 빠르게 누르면 작동을 하지 않는다.

 

이유

 css속성에 transition이 0.5s로 설정되어 있어서 0.5초보다 빠르게 누르면 조건문에 걸리지 않는다.

 

 

해결

getComputedStyle(actorListUl.lastChild).right === 0px이 아닌 getComputedStyle(actorListUl.lastChild).right >= 0px로 하여 0px과 같은이 아닌 0px보다 크면으로 조건을 걸어서 조건에 걸리면 returen으로 함수를 종료시켰다.