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 に答える