자바스크립트 이미지 슬라이드 질문입니다


function right1() {
  var x = document.getElementsByClassName("aa");
  var i;
  for(i = 0; i < x.length; i++) {
    x[i].style.transform += "translateX(167px)";
  }
}

이미지 슬라이드를 이렇게 만들었는데 궁금한게 마지막 이미지가 그 이미지들을 감싸고 있는 div끝에 도착하면 다시 처음 이미지부터 이동을 시키도록 하고 싶은데 if문으로 돌아갈 방법을 잘 모르겠습니다. 도와주세요!


조회수 643


2 답변


정리를 해보면

  1. 현재 몇 픽셀만큼 이동했는지
  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을 따로 작성해서 사용했습니다.

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close