Question

我目前正在构建一个具有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的原因是滚动框的大小。

知道为什么会发生这种情况以及如何使其发挥作用/修复它。

非常感谢

Answer 1

如果您使用“动画片”，那就更好了。功能，而不是＆＃39; css＆＃39;功能。它会顺畅地滚动到左侧和右侧，让人们可以看到所有内容，而不仅仅是结尾（更好的用户体验）这里是一个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);
}

Answer 2

使用喜欢

$(".scrollableContent").css({ 'margin-left' : '-970px' });
        $(".ui-slider-handle").css({ left: "100%" });
        t = setTimeout(function(){MoveLeft()}, 5000);

添加'margin-left' : '-970px'而不是双引号

Demo

Answer 3

您必须在函数的css属性中加上引号。您错过了moveRight和moveLeft函数中margin-left和left属性的引号。

 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);
}

jquery水平滚动条消失

3 个答案: