모바일 스와이프 구현 마지막 숙제

인터랙티브 개발 실무 끝장내기 [역량 강화편]

실습 예제 소개

작성

260

 혹시 모바일 cd플레이어 관련해서 function touchFunc(e) {
    let type = null;
    let touch = null;

    switch (e.type) {
      case "touchstart":
        type = "mousedown";
        touch = e.changedTouches[0];
        start_X = touch.clientX;

        end_X = 0;

        break;

      case "touchend":
        type = "mouseup";
        touch = e.changedTouches[0];
        end_X = touch.clientX;

        let chkNum = start_X - end_X;
        let chkNumAbs = Math.abs(chkNum);

        if (chkNumAbs > 100) {
          console.log(chkNum);
          if (chkNum < 0) {
            if (pageNum > 0) {
              pageNum--;
            } else {
              pageNum = totalNum - 1;
            }
          } else {
            if (pageNum < totalNum - 1) {
              pageNum++;
            } else {
              pageNum = 0;
            }
          }
          pageChangeFunc();
        }
        break;
    }
  }

마지막으로 숙제해주신부분에서 pageNum이계속해서 -- 또는 ++ 이면 없는 인덱스까지 튀어나오기때문에 주석해주신 부분에서 pageNum의 컨디션을 넣어주어야 한다고 생각해서 작성했는데 혹시 맞는지 궁금합니다

javascript 인터랙티브-웹

답변 2

wnwlghdqkqh

질문자

아 제가 생각했던 로직은 이전강의에 수강했던 것처럼 마지막 화면에서 다시 next를 눌러도 0으로 돌아가도록, 첫번째 화면에서 prev를 눌러도 마지막으로 가도록 구현하기 위해서 해당 로직을 넣었던 것이었습니다.

코딩일레븐

지식공유자

아 네네 돌아가는 것이면 맞습니다 ^^

코딩일레븐

지식공유자

안녕하세요.

원하는대로 동작을 하신다면 맞습니다.

제가 궁금한 부분은

if (pageNum > 0) {
   pageNum--;
} else {
   pageNum = totalNum - 1;
}

pageNum 이 0보다 작으면 pageNum = 0; 을 해줘야하는 것 아닌가요?

어떻게 구현을 하시려는지 정확히 모르겠지만요. 아래도

if (pageNum < totalNum - 1) {
   pageNum++;
} else {
   pageNum = 0;
}

pageNum = totalNum - 1; 이라고 해줘야 할 것 같아요.

아니면 빼도 동작이 같을 것 같아요.

if (pageNum > 0) {
   pageNum--;
} 

//

if (pageNum < totalNum - 1) {
   pageNum++;
}

인프런 커뮤니티 질문&답변

모바일 스와이프 구현 마지막 숙제