5 글 보임 - 1 에서 5 까지 (총 5 중에서)
-
글쓴이글
-
2023년 4월 4일 19:06 #74776
Ted참가자응용문제에서 캐러셀이 갯수가 많아질 때 코드를 생각하다가 for문으로 만들어봤는데요, 마지막 박스로 이동만 되면 모든게 정지가 됩니다. 박스추가해서 많이 만들어도 다행히 잘 작동하는데 마지막 박스만 가면 그냥 정지,,,가 되는데요. 진짜 생각 많이 해봤는데요, 혹시 마지막박스가면 반복문이 종료가 되면서 모든 이벤트가 종료가 되는건가요..? 근데, 마지막 간다해도, 다시 번호판 1 2 3 누른뒤 다시 드래그하면 또 잘 되거든요.. 어떻게 코딩을 해야 마지막박스로 드래그하고 나서도 잘 작동하게 만들 수 있을까요... 고심끝에 질문 드립니다 ㅠㅠ.
<script> let 시작좌표 = 0; let 눌렀냐 = false; // for문으로 작성해봄 for (let i = 0; i < $('.slide-box').length - 1; i++) { $('.slide-box') .eq(i) .on('mousedown', function (e) { 시작좌표 = e.clientX; 눌렀냐 = true; }); $('.slide-box') .eq(i) .on('mousemove', function (e) { console.log(e.clientX - 시작좌표); if (눌렀냐) { switch (i) { case 0: console.log(`현재 i의 값은 = ${i}`); console.log( "$('.slide-box').length - 1의 값은 = " + ($('.slide-box').length - 1) ); if (e.clientX - 시작좌표 < 0) { $('.slide-container').css( 'transform', `translateX(${e.clientX - 시작좌표}px)` ); } break; case $('.slide-box').length - 1: console.log(`현재 i의 값은 = ${i}`); console.log( "$('.slide-box').length - 1의 값은 = " + ($('.slide-box').length - 1) ); if (e.clientX - 시작좌표 > 0) { $('.slide-container').css( 'transform', `translateX(calc(${e.clientX - 시작좌표}px - ${i}00vw))` ); } break; default: console.log(`현재 i의 값은 = ${i}`); console.log( "$('.slide-box').length - 1의 값은 = " + ($('.slide-box').length - 1) ); $('.slide-container').css( 'transform', `translateX(calc(${e.clientX - 시작좌표}px - ${i}00vw))` ); } } }); $('.slide-box') .eq(i) .on('mouseup', function (e) { 눌렀냐 = false; switch (i) { case 0: if (`${e.clientX - 시작좌표}` <= -200) { $('.slide-container') .css('transform', `translateX(-100vw)`) .css('transition', 'all 0.5s'); current++; } else { $('.slide-container') .css('transform', 'translateX(0vw)') .css('transition', 'all 0.5s'); } break; case $('.slide-box').length - 1: if (`${e.clientX - 시작좌표}` > 200) { $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i - 1}00vw)`); current--; } break; default: if (`${e.clientX - 시작좌표}` <= -200) { $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i + 1}00vw)`); current++; } else if (`${e.clientX - 시작좌표}` > 200) { console.log(`-${i - 1}00vw 만큼 이동합니다`); $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i - 1}00vw)`); current--; } else { $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i}00vw)`); } } setTimeout(() => { $('.slide-container').css('transition', 'none'); }, 500); }); } </script>2023년 4월 5일 07:40 #74829
Ted참가자아 그거는, 1 2 3 버튼과 이전 다음 버튼에도 같이 하려고 했던건데 current 없이 코드만 봐주세요 current 삭제한 코드입니다.
let 시작좌표 = 0; let 눌렀냐 = false; // for문으로 작성해봄 for (let i = 0; i < $('.slide-box').length - 1; i++) { $('.slide-box') .eq(i) .on('mousedown', function (e) { 시작좌표 = e.clientX; 눌렀냐 = true; }); $('.slide-box') .eq(i) .on('mousemove', function (e) { console.log(e.clientX - 시작좌표); if (눌렀냐) { switch (i) { case 0: console.log(`현재 i의 값은 = ${i}`); console.log( "$('.slide-box').length - 1의 값은 = " + ($('.slide-box').length - 1) ); if (e.clientX - 시작좌표 < 0) { $('.slide-container').css( 'transform', `translateX(${e.clientX - 시작좌표}px)` ); } break; case $('.slide-box').length - 1: console.log(`현재 i의 값은 = ${i}`); console.log( "$('.slide-box').length - 1의 값은 = " + ($('.slide-box').length - 1) ); if (e.clientX - 시작좌표 > 0) { $('.slide-container').css( 'transform', `translateX(calc(${e.clientX - 시작좌표}px - ${i}00vw))` ); } break; default: console.log(`현재 i의 값은 = ${i}`); console.log( "$('.slide-box').length - 1의 값은 = " + ($('.slide-box').length - 1) ); $('.slide-container').css( 'transform', `translateX(calc(${e.clientX - 시작좌표}px - ${i}00vw))` ); } } }); $('.slide-box') .eq(i) .on('mouseup', function (e) { 눌렀냐 = false; switch (i) { case 0: if (`${e.clientX - 시작좌표}` <= -200) { $('.slide-container') .css('transform', `translateX(-100vw)`) .css('transition', 'all 0.5s'); } else { $('.slide-container') .css('transform', 'translateX(0vw)') .css('transition', 'all 0.5s'); } break; case $('.slide-box').length - 1: if (`${e.clientX - 시작좌표}` > 200) { $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i - 1}00vw)`); } break; default: if (`${e.clientX - 시작좌표}` <= -200) { $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i + 1}00vw)`); } else if (`${e.clientX - 시작좌표}` > 200) { console.log(`-${i - 1}00vw 만큼 이동합니다`); $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i - 1}00vw)`); } else { $('.slide-container') .css('transition', 'all 0.5s') .css('transform', `translateX(-${i}00vw)`); } } setTimeout(() => { $('.slide-container').css('transition', 'none'); }, 500); }); } -
글쓴이글
5 글 보임 - 1 에서 5 까지 (총 5 중에서)
- 답변은 로그인 후 가능합니다.