自定义滑块偏移定位
Custom slider offset positioning
我实现了一个垂直滑块,有两个控件(上/下和下/上),但我无法使其正常工作。如果单击了任一控件,我就有点迷失了滑块偏移(顶部/底部)逻辑。
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/
这是我根据您的代码提出的建议。为了使其工作,您需要将.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'
});
}
});
相关文章:
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- jQuery自定义验证比较多个输入的序列
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 在wordpress一定时间后更改自定义字段
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 自定义函数中的光标位置
- 用于检查数组中是否存在元素的javascript自定义方法
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- Meteor-添加用户自定义字段的方法不起作用
- 需要帮助来定位/修改自定义数据属性
- 在HTML/CSS中自定义和定位垂直滑块
- 如何定位谷歌地图自定义信息框上的元素
- 带有自定义图标的谷歌地图标记定位
- 多个自定义访问群体在同一页面上重新定位像素
- 自定义滑块偏移定位
- 根据自定义属性的存在定位元素
- 如何使用javascript在Highcharts中添加自定义类名来标记定位器
- 在量角器中添加自定义定位器快捷方式
- 量角器自定义定位器无法定位元素