自定義滑塊偏移定位

我實現了一個垂直滑塊，有兩個控件（上/下&向下/上一級）但是我無法讓它正常工作。如果任何一個控件被點擊，我都會失去滑塊偏移（頂部/底部）邏輯。自定義滑塊偏移定位

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

自定義滑塊偏移定位

回答

相關問題