Jquery 垂直列表滑块不会重复多次
我有一个垂直滑块，除非需要滚动多次，否则效果很好。
代码
$(document).ready(function() {
var speed = 1050;
var elementHeight = 106;
var countElements = $('#portfolio-navigation ul li');
var numberElements = countElements.length;
var totalHeight = numberElements * elementHeight;
var containerHeight = 742;
var currentPlace = elementHeight * 7;
var currentDifference = 0;
$("#up").addClass("nogo");
$("#down").click(function(event) {
$("#down").addClass("nogo");
$("#up").removeClass("nogo");
event.preventDefault();
if (currentPlace >= totalHeight) {
} else { // Ellers, continue!
currentPlace += elementHeight;
currentDifference += elementHeight;
$("#portfolio-navigation ul").animate({ top: "-510px"}, speed );
}
});
$("#up").click(function(event) {
$("#down").removeClass("nogo");
$("#up").addClass("nogo");
event.preventDefault();
if (currentPlace <= containerHeight) {
} else { // Ellers, continue!
currentPlace -= elementHeight;
currentDifference -= elementHeight;
$("#portfolio-navigation ul").animate({ top: 0 + "px"}, speed );
}
});
});
这是我希望能够使滑块向下滚动多次的 。
有什么想法吗？
干杯 尼克
I have a vertical slider that works well except when it needs to scroll more than once.
This is the code
$(document).ready(function() {
var speed = 1050;
var elementHeight = 106;
var countElements = $('#portfolio-navigation ul li');
var numberElements = countElements.length;
var totalHeight = numberElements * elementHeight;
var containerHeight = 742;
var currentPlace = elementHeight * 7;
var currentDifference = 0;
$("#up").addClass("nogo");
$("#down").click(function(event) {
$("#down").addClass("nogo");
$("#up").removeClass("nogo");
event.preventDefault();
if (currentPlace >= totalHeight) {
} else { // Ellers, continue!
currentPlace += elementHeight;
currentDifference += elementHeight;
$("#portfolio-navigation ul").animate({ top: "-510px"}, speed );
}
});
$("#up").click(function(event) {
$("#down").removeClass("nogo");
$("#up").addClass("nogo");
event.preventDefault();
if (currentPlace <= containerHeight) {
} else { // Ellers, continue!
currentPlace -= elementHeight;
currentDifference -= elementHeight;
$("#portfolio-navigation ul").animate({ top: 0 + "px"}, speed );
}
});
});
I want to be able to make the slider scroll down more than once.
Any ideas?
Cheers
Nik
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不确定我是否理解你的问题，但通常你会想要上下移动 UL，直到它到达列表的末尾。当您有固定高度的容器时，这很容易做到。只需在下一个按钮的动画中减去 510px，而不是将其设置为 -510px。之后，使用totalheight和containerheight变量来确定何时禁用按钮（我建议使用if/else）语句，而不是添加和删除类）。
I'm not sure I understand your question, but generally you would want to shift the UL up and down until it it gets to the end of the list. This is easy enough to do when you have a fixed-height container. Just subtract 510px in your animation on the next button instead of setting it to -510px. After that, use your totalheight and containerheight variables to figure out when to disable the buttons (I would suggest using if/else) statements instead of adding and removing classes).