Question

我正在尝试使用向上/向下按钮创建一个图库库。到目前为止，我去动画，但现在我需要让它停在第一张和最后一张图片上。

这是我到目前为止所做的，jsfiddle.net/sJDMq/47（不介意按钮，我仍然需要处理它们，但它们在那里，顶部和底部的红色框）

谢谢！

$(document).ready(function() {

    $(".down_button").click(function () {    
       $(".scroll-products").animate({marginTop: '-=700px'}, 300);
    });

    $(".up_button").click(function () {
       $(".scroll-products").animate({ marginTop: '+=700px' }, 300);
    });
});

Answer 1

我不会这样做，但只是按照你的开始，我会让这个JS做到这一点：

$(document).ready(function(){
  var curIndex = 0;
  var height = 700;
  var maxHeight = 0;
  var allImages = document.getElementsByClassName("sidebar_images");
  for(var i=0; i<allImages.length; i++) {
    maxHeight += allImages[i].offsetHeight;   
  }
  var maxIndex = Math.ceil(maxHeight/height);

  $(".down_button").click(function () {
    if(curIndex < maxIndex) {
      $(".scroll-products").animate({marginTop: '-='+height+'px'}, 300);
      curIndex++;
    }
  });
  $(".up_button").click(function () {
    if(curIndex > 0){
      $(".scroll-products").animate({ marginTop: '+='+height+'px' }, 300);
      curIndex--;
    }
  });
});

我刚刚更新了你的小提琴here。

在最后一张图片上停止.animate（）

1 个答案: