0

我正在尝试使用向上/向下按钮制作图片库以滚动。到目前为止,我制作了动画,但现在我需要让它停在第一张和最后一张图像上。

这是我到目前为止得到的,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);
    });
});
4

1 回答 1

0

我不会这样做,但只要按照你开始的方式去做,我就会让这个 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--;
    }
  });
});

我刚刚在这里更新了你的小提琴。

于 2013-09-14T22:38:55.857 回答