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

조회수 5742회
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 답변

  • 좋아요

    4

    싫어요
    채택 취소하기

    정리를 해보면

    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을 따로 작성해서 사용했습니다.
    • 질문 드립니다. 내용을 토대로 붙여넣기하여 작은 배너를 만들고자 합니다. 그런데 문제는 #prev와 #next 버튼이 먹통이어서 질문 드립니다. header 레이아웃의 div:nth-child(3)번째 레이아웃에 slider 레이아웃을 추가하였으며 display: flex로 잡은 상태입니다. 당황스러운부분은 flex로 설정하면 혹 slider와 같은 스크립트에서의 문제점이 많이 발생하나요? 대한민국 2018.3.19 02:39

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.