자바스크립트 이미지 슬라이드 질문입니다
조회수 6233회
function right1() {
var x = document.getElementsByClassName("aa");
var i;
for(i = 0; i < x.length; i++) {
x[i].style.transform += "translateX(167px)";
}
}
이미지 슬라이드를 이렇게 만들었는데 궁금한게 마지막 이미지가
그 이미지들을 감싸고 있는 div
끝에 도착하면 다시 처음 이미지부터 이동을 시키도록 하고 싶은데
if
문으로 돌아갈 방법을 잘 모르겠습니다. 도와주세요!
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
2 답변
-
정리를 해보면
- 현재 몇 픽셀만큼 이동했는지
- 부모의 끝은 몇 픽셀인지
를 알면 되겠죠.
for(i=0;i<x.length;i++){ x[i].style.transform += "translateX(167px)"; var parentWidth = parseInt(x[i].parentElement.style.width); var myX = x[i].style.transform.match(/trans/g).length * 167; if( parentWidth < myX ) x[i].style.transform = ""; }
질문자님의 코드를 건드리지 않고 추가만 하려면 이런식으로 해야될 것 같습니다만..
본래는 변수나 객체를 만들어서 현재 위치를 저장하고 있는게 정석입니다.-
(•́ ✖ •̀)
알 수 없는 사용자 -
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
-
.html
<div class="slider"> <div class="slide-container"> <div class="slide"> A </div> <div class="slide"> B </div> <div class="slide"> C </div> </div> </div> <button id="prev">prev</button> <button id="next">next</button>
.css
.slider { width: 100px; height: 100px; overflow: hidden; } .slide-container { width: 300px; height: 100px; background-color: gray; } .slide { float: left; width: 100px; height: 100px; background-color: lightgray; transition: transform 0.5s ease; }
.js
(function() { var positionOffset = 0; Number.prototype.mod = function(n) { return ((this % n) + n) % n; } function moveSlide() { var slides = document.getElementsByClassName('slide'); for (var i = 0; i < slides.length; i++) { var slideWidth = slides[i].offsetWidth; var xAxis = (-slideWidth * positionOffset).mod(-slideWidth * slides.length); slides[i].style.transform = "translateX(" + xAxis + "px)"; } } $('#prev').click(function() { positionOffset--; moveSlide(); }); $('#next').click(function() { positionOffset++; moveSlide(); }); })();
https://jsfiddle.net/y85zk37d/4/
modulus operator
%
를 사용하는 방법으로 간단하게 샘플 코드 작성해 보았습니다.- JavaScript에서 마이너스 값에 대해서 modulus operator가 제대로 작동하지 않아 mod function을 따로 작성해서 사용했습니다.
-
(•́ ✖ •̀)
알 수 없는 사용자 -
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
- 질문 드립니다. 내용을 토대로 붙여넣기하여 작은 배너를 만들고자 합니다. 그런데 문제는 #prev와 #next 버튼이 먹통이어서 질문 드립니다. header 레이아웃의 div:nth-child(3)번째 레이아웃에 slider 레이아웃을 추가하였으며 display: flex로 잡은 상태입니다. 당황스러운부분은 flex로 설정하면 혹 slider와 같은 스크립트에서의 문제점이 많이 발생하나요? 알 수 없는 사용자 2018.3.19 02:39
댓글 입력