自定义滑块偏移定位

我实现了一个垂直滑块，有两个控件（上/下&向下/上一级）但是我无法让它正常工作。如果任何一个控件被点击，我都会失去滑块偏移（顶部/底部）逻辑。自定义滑块偏移定位

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; 

});

这里是习俗的小提琴垂直滑块：https://jsfiddle.net/k6uba9v2/1/

来源

2015-11-04 Vincent

你能描述一下预期的行为应该是什么吗？它看起来像底部的控制工作正常，但如果你一直走到底部，点击，所有的图片滚动屏幕。无论如何，我会重新考虑你的代码结构。当用户点击底部按钮时，您似乎应该抓取高度+ offset.top大于视口高度的图片（例如，图片超出范围或被视口剪辑），然后增加图片的scrollTop位置相应列出。反之亦然。 – dcochran

这是我的建议根据您的代码。对于它的工作，您需要将.gallery-containertop设置为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' 
     }); 
    } 
});

来源

2015-11-04 04:25:18 1cgonza

自定义滑块偏移定位

回答

相关问题