Javascript jQuery-如果左<；=0，将css设置为X金额

我已经创建了一个滚动脚本，但我需要它在set div到达左侧这么多像素时循环，这里是我的脚本，可以完成所有操作，但要让它正常工作就没有那么幸运了

var scrollerwidth = 0;

$(window).load(function () {
    $('.scroller ul li').each(function() {
        scrollerwidth += ($(this).width() + 40);
    });
    $(".scrollerTwo").css({left: scrollerwidth});
    ulScrolls();
});

function ulScrolls(){
    $(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
    ulScrolls();
}

$(document).ready(function() {
    var scrollertwoleft = $(".scrollerTwo").offset().left; 
    scrollertwoleft = parseInt(scrollertwoleft, 10);
    scrollerwidth = parseInt(scrollerwidth, 10);
    if(scrollertwoleft <= 100){
        $(".scroller").css({left: scrollerwidth});
        alert("derp");
    }else{
        alert(scrollertwoleft);
    }
});

var scrollerwidth=0；
$（窗口）。加载（函数（）{
$（'.scroller ul li'）。每个（函数（）{
scrollerwidth+=（$（this）.width（）+40）；
});
$（“.scrollerTwo”）.css（{left:scrollerwidth}）；
乌斯克罗尔群岛（）；
});
函数ulScrolls（）{
$（“.scroller.scrollerTwo”）.animate（{'left'：'-=10px'}，100）；
乌斯克罗尔群岛（）；
}
$（文档）.ready（函数（）{
var scrollertwoleft=$（“.scrollerTwo”）.offset（）.left；
scrollertwoleft=parseInt（scrollertwoleft，10）；
scrollerwidth=parseInt（scrollerwidth，10）；
如果（滚动条左

重复调用
ulScrolls
应该类似

setTimeout(function() { ulScrolls() }, 120);

以防止调用堆栈超出范围，并为动画工作留出时间

检查
.scroller
和
.scrollerTwo
CSS
left
值应在
ulScrolls
中

li
宽度设置为“45px”进行测试



因此，总的来说，代码应该如下所示：

var scrollerwidth = 0;

$(document).ready(function()
{
    $('.scroller ul li').each(function()
    {
        scrollerwidth += $(this).width() + 40;
    });
    $(".scrollerTwo").css({left: scrollerwidth});

    ulScrolls();
});

function ulScrolls()
{
    var scrollertwoleft = parseInt($(".scrollerTwo").css('left')); 
    if (scrollertwoleft <= -scrollerwidth)
    {
        $(".scrollerTwo").css({left: scrollerwidth});
    }
    else
    {
        var scrolleroneleft = parseInt($(".scroller").css('left'));
        if (scrolleroneleft <= -scrollerwidth)
        {
            $(".scroller").css({left: scrollerwidth});
        }
    }    
    $(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);

    setTimeout(function() { ulScrolls(); }, 120);
}

var scrollerwidth=0；
$（文档）.ready（函数（）
{
$（'.scroller ul li'）。每个（函数（）
{
scrollerwidth+=$（this）.width（）+40；
});
$（“.scrollerTwo”）.css（{left:scrollerwidth}）；
乌斯克罗尔群岛（）；
});
函数ulScrolls（）
{
var scrollertwoleft=parseInt（$（“.scrollerTwo”）.css（'left'）；
如果（如果demo@farhatmihalko我已经添加了一个关于JSFIDDLESPLE的演示，在你的
ulScrolls
函数中检查它。我刚刚看到了这一点，但它会将它们一起移动，并且只循环整个内容，所以当到达该点时，它会跳转，而不会将滚动条1连接到滚动条2的末端。它应该这样开始：-[1][2]然后当2点击左键时：0；应该是这样：-[2][1]然后当1再次点击0时，最终还是这样[1][2]让所有的蛇都在一起，希望这能让sense@MatthewArtiman我重写了答案以适应你的需要，我希望也是你的想法。那很好，现在肯定会循环，所以感谢你到目前为止的帮助，但我现在遇到了一个错误，第二个div覆盖像这样出于某种原因-。html和css与以前完全相同e、 所以我很好奇到底发生了什么there@MatthewArtiman我在小提琴中将
li
width设置为“45px”-也许你不把它改回去？@MatthewArtiman不客气：）请注意：如果
div.scroller
和
div.scrollerTwo
具有不同的宽度，请使用类似
scrollerWidthOne
和
scrollerWidthOne
的方法保持其正常工作。
var scrollerwidth = 0;

$(document).ready(function()
{
    $('.scroller ul li').each(function()
    {
        scrollerwidth += $(this).width() + 40;
    });
    $(".scrollerTwo").css({left: scrollerwidth});

    ulScrolls();
});

function ulScrolls()
{
    var scrollertwoleft = parseInt($(".scrollerTwo").css('left')); 
    if (scrollertwoleft <= -scrollerwidth)
    {
        $(".scrollerTwo").css({left: scrollerwidth});
    }
    else
    {
        var scrolleroneleft = parseInt($(".scroller").css('left'));
        if (scrolleroneleft <= -scrollerwidth)
        {
            $(".scroller").css({left: scrollerwidth});
        }
    }    
    $(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);

    setTimeout(function() { ulScrolls(); }, 120);
}