Question

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

.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 {@ 1}}时，元素都会保持正确移动一定数量的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');
  });
});

FIDDLE

或使用 animate() 方法

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

FIDDLE

Answer 2

每次都会正确触发click事件 - translate会将元素移动到特定位置。如果它已经是760px并且再次调用click以将其移动到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);
});

jQuery .click（）激活addClass（）＆amp; class使用transform：translate来移动元素

3 个答案: