我目前正在构建一个具有 jquery
水平滚动框/条的网站。
问题是我想每 5 秒左右一直向右和向左走。
这里是我试图用来做我想做的事情的代码。
function MoveRight() {
$(".scrollableContent").css({ margin-left: "-970px" });
$(".ui-slider-handle").css({ left: "100%" });
t = setTimeout(function(){MoveLeft()}, 5000);
}
function MoveLeft() {
$(".scrollableContent").css({ margin-left: "0px" });
$(".ui-slider-handle").css({ left: "0%" });
t = setTimeout(function(){MoveRight()}, 5000);
}
问题是当我这样做时滚动条消失了。
我使用 Margin-left -970px 的原因是滚动框有多大。
知道为什么会发生这种情况以及如何使其工作/修复。
非常感谢
最佳答案
最好使用'animate' 函数而不是'css' 函数。它会平滑地向左和向右滚动,让人们看到所有的内容,而不仅仅是结束(更好的用户体验) 这是一个 JSFiddle,问题已修复。
http://jsfiddle.net/TGEQf/206/
function MoveRight() {
$(".scrollableContent").animate({ 'margin-left': '-500px'}, 4500);
$(".ui-slider-handle").animate({ left: "100%"}, 4000);
t = setTimeout(function(){MoveLeft()}, 5000);
}
function MoveLeft() {
$(".scrollableContent").animate({ 'margin-left': '0px'}, 4500);
$(".ui-slider-handle").animate({ left: "0%"}, 4000);
t = setTimeout(function(){ MoveRight() }, 5000);
}
关于javascript - jquery水平滚动条消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24507603/