javascript - 自定义 slider 偏移定位

Question

我实现了一个带有两个控件(上/下和下/上)的垂直 slider ，但我无法使其正常工作。如果单击其中一个控件，我会迷失在 slider 偏移(顶部/底部)逻辑中。

HTML

<div id="2353165313-gallery" class="product-more-pictures desktop-3">
  <a href="#" class="up">︽</a>
  <div class="gallery-container" style="top: -173px;">
      <a href="#" data-image="//cdn.shopify.com/s/files/1/0190/3782/products/Feature_Say_it_to_My_Lace_Party_Dress_0039_1024x1024.jpg?v=1446136593" data-image-id="5777399809" data-zoom-image="//cdn.shopify.com/s/files/1/0190/3782/products/Feature_Say_it_to_My_Lace_Party_Dress_0039.jpg?v=1446136593">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Feature_Say_it_to_My_Lace_Party_Dress_0039_compact.jpg?v=1446136593" data-image-id="5777399809" alt="Say It To My Lace Party Dress">
      </a>

      <a href="#" data-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0007_1024x1024.jpg?v=1446136608" data-image-id="5777409601" data-zoom-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0007.jpg?v=1446136608">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0007_compact.jpg?v=1446136608" data-image-id="5777409601" alt="Say It To My Lace Party Dress">
      </a>

      <a href="#" data-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0086_1024x1024.jpg?v=1446136624" data-image-id="5777420225" data-zoom-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0086.jpg?v=1446136624">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0086_compact.jpg?v=1446136624" data-image-id="5777420225" alt="Say It To My Lace Party Dress">
      </a>

      <a href="#" data-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0092_1024x1024.jpg?v=1446136640" data-image-id="5777431617" data-zoom-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0092.jpg?v=1446136640">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0092_compact.jpg?v=1446136640" data-image-id="5777431617" alt="Say It To My Lace Party Dress">
      </a>

      <a href="#" data-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0104_1024x1024.jpg?v=1446136662" data-image-id="5777446593" data-zoom-image="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0104.jpg?v=1446136662">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Say_it_to_My_Lace_Party_Dress_0104_compact.jpg?v=1446136662" data-image-id="5777446593" alt="Say It To My Lace Party Dress">
      </a>
  </div>
  <a href="#" class="down active">︾</a>
</div>

CSS

.product-more-pictures a {
  display: block;
}

.product-more-pictures {
  text-align: right;
  height: 462px;
  overflow: hidden;
  position: relative;
  width: 104px;
}

.gallery-container {
  position: relative;
  padding: 30px 0px;
}

.gallery-container img {
  margin-bottom: 0px;
}

.product-more-pictures .up,
.product-more-pictures .down {
  position: absolute;
  background: #fff;
  padding: 0px 0px 4px;
  width: 100%;
  text-align: center;
  z-index: 80;
}

.product-more-pictures .up { top: 0px; }
.product-more-pictures .down {
  bottom: 0px; 
  padding-top: 10px;
  line-height: .9;
}

JavaScript

var the_offset = 0;
var image_height = 0;
var gallery_offset = 0;
var image_count = $('img.thumbnail').length;
var click_count = 0;

$('.product-more-pictures .down').click(function() {
    image_height = jQuery(this).parent().find('img.thumbnail').height() + 7;
    gallery_offset = $(".gallery-container").css("top").replace(/[^0-9]/g, '');
    the_offset = gallery_offset ? parseInt(gallery_offset) + parseInt(image_height) : image_height;

    if(the_offset <= image_height * image_count - 1   ) {
        $(".gallery-container").animate({'top': '-' + the_offset + 'px' })
        click_count = click_count + 1;
    }
});

$('.product-more-pictures .up').click(function() {
    var hidden_items = parseInt(image_height) * click_count - 1;
    $(".gallery-container").animate({'top': the_offset - hidden_items + 'px' });
    click_count = click_count - 1;

});

这是自定义垂直 slider 的 fiddle :https://jsfiddle.net/k6uba9v2/1/

Answer 1

这是我根据您的代码提出的建议。 要使其正常工作，您需要将 .gallery-container top 设置为 0(如果将其移至 CSS 可能会更好)。

JSFIDDLE 的链接有了这个建议。

jQuery(function () {
    var gallery_offset = 0;
    var image_count = $('img.thumbnail').length;
    var click_count = 0;
    var image_height = jQuery('.thumbnail').parent().outerHeight();

    $('.product-more-pictures .down').click(function () {
        if (click_count < image_count - 1) {
            click_count = click_count + 1;
            update_gallery();
        }
    });

    $('.product-more-pictures .up').click(function () {
        if (click_count > 0) {
            click_count = click_count - 1;
            update_gallery();
        }
    });

    function update_gallery() {
        gallery_offset = click_count * image_height;
        $(".gallery-container").animate({
            'top': '-' + gallery_offset + 'px'
        });
    }
});