jQuery .click（）激活addClass（），并且类使用transform：转换以移动元素

Question

我正在制作一个带有两个箭头的图像滑块。 例如，当.rightArrow .click() .rightArrow ，将添加一个名为.moveRight的类（ .addClass() ）。

.moveRight{
    transform: translate(760px,0);
    -webkit-transform: translate(760px,0); /** Safari & Chrome **/
    -o-transform: translate(760px,0); /** Opera **/
    -moz-transform: translate(760px,0); /** Firefox **/
}

问题在于此click事件仅触发一次 。 我想这是因为我要告诉可移动元素去特定的位置。

我希望元素在每次.rightArrow .click() . .rightArrow都继续向右移动一定数量的px。

jQuery的

$( document ).ready(function() {
  $('.rightArrow').click( function() {
    $('.imgGluedToThis').removeClass("moveLeft");
    $('.imgGluedToThis').addClass("moveRight");
  });
  $('.leftArrow').click( function() {
    $('.imgGluedToThis').removeClass("moveRight");
    $('.imgGluedToThis').addClass("moveLeft");
  });
});

这是HTML

      <img src="rightArrow.png" class="rightArrow">
      <img src="leftArrow.png" class="leftArrow">
      <div class="pictures-container">
        <div class="imgGluedToThis">
          <div class="picture-container">
            <a href="#openModal1">
           <img src="house.png" class="picture">
          </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1">
            <img src="building.png" class="picture">
            </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1"> 
            <img src="house2.png" class="picture">
            </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1">
           <img src="house.png" class="picture">
          </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1">
            <img src="building.png" class="picture">
            </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1"> 
            <img src="house2.png" class="picture">
            </a>
          </div>          
        </div>
      </div> 

Answer 1

在jQuery中使用css()方法

$(document).ready(function() {
  $('.rightArrow').click( function() {
     $('.imgGluedToThis').css('left','+=10px');
  });
  $('.leftArrow').click( function() {
     $('.imgGluedToThis').css('left','-=10px');
  });
});

小提琴

或使用animate()方法

$(document).ready(function() {
  $('.rightArrow').click( function() {
      $('.imgGluedToThis').animate({'left':'+=10px'});
  });
  $('.leftArrow').click( function() {
      $('.imgGluedToThis').animate({'left':'-=10px'});
  });
});

小提琴

Answer 2

click事件每次都会正确触发-平移会将元素移动到特定位置。 如果已经是760px，然后再次单击以将其移动到760px，则似乎什么也没有发生。

您可以设置一些类来定义最左侧，最右侧等图像的显示位置，并相应地更新每个元素的类。

如果滑块需要无限大，则也需要更新DOM来将元素设置为正确的顺序，并在完成后再次更新类。

Answer 3

具体来说，如果您要使用翻译，则需要跟踪它并使用代码进行更改，例如：

jQuery(function ($) {
    // closures
    var iImageIndex = 0;
    var iSlideWidth = 760;
    var iImageMax = $('.picture-container').size();
    var $slides = $('.imgGluedToThis');
    var fTranslate = function (iDirection) {
        iDirection = (iDirection && (iDirection < 0) ) ? -1 : 1;        // normalize direction
        iImageIndex = iImageIndex + iDirection;                         // increment direction
        iImageIndex = iImageIndex < 0 ? iImageMax + iImageMax : iImageIndex; // check left end
        iImageIndex = iImageIndex % iImageMax;                          // check right end
        $slides.css('transform', 'translate(' + (iSlideWidth * iImageIndex) + 'px, 0)');
    }
    // event methods (closures)
    var fClickLeft = function () {
        fTranslate(-1);
    };
    var fClickRight = function () {
        fTranslate(1);
    };
    // event handlers
    $('.rightArrow').click(fClickRight);
    $('.leftArrow').click(fClickLeft);
});