jQuery循环滑块故障

我试图通过在ul.slider-ul上设置.css{left:0px}，使下面的滑块循环。我有一个console.logLoop来检查if语句是否正常工作

HTML

jQuery

function slider(x) {

    function loop() { //Sets repeating random value
        var rand = Math.round(Math.random() * (5000 - 1000)) + 1000;
        slider(x)
    }

    var size = $(x).parent().width() //Getting the size of the viewport div

    var rand = Math.round(Math.random() * (5000 - 1000)) + 1000; //Sets initial random value

    setTimeout( function() { //Animating the slider to the left with a random time
        $(x).animate({"left" : "-=" + size + "px"}, 2000)
        loop();
    }, rand);

    var width = 0;
    $(x).find('li').each(function() { //Finding the total width of the images
        width += $(this).outerWidth( true );
        return(width)
    });

    var offset = size - width + "px"; //The point at which to reset the slider

    var pos = $(x).position().left + "px"; //The current left position of the slider

    var $this = $(this)
    if(pos == offset) {
        console.log("Loop"); //This gets called out
        $this.animate({"left" : "0px"}); //This doesn't set the css value
    };
}


$(function() {
    $("ul.slider-ul").each(function() {
        $this = $(this)
        slider($this)
    });
 });

请看这里的小提琴：

编辑：

---

为了澄清问题，问题是jQuery底部的if语句。由于某些原因，创建循环操作时没有重置元素css的左值。

您缺少很多“；”在javascript代码中：

编辑 这里有一个工作代码：DEMO

我不得不改变了很多东西，动画是空的，在它重置之前，所以你将不得不发挥它有一个完美的动画

---

edit2:我更改了代码以使其正确重置您的问题是什么？@aplo我的问题是循环if语句不工作fPos==offset{}。滑块只是继续向左移动。；如果使用Enter键终止行代码，则实际上不需要。顺便说一句，在发布答案之前，你应该先尝试一下代码，以确保它能正常工作。谢谢你指出这一点！似乎我一直在忙着让它工作，但我错过了一些。然而，这并不能解决手头的问题。好吧，我不会删除，但我会在得到进展后进行编辑on@Mallander，你能解释一下你想用ifpos==offset检查什么吗？@Apolo offset是滑块应该重置的左边值。pos是滑块的当前左侧位置。所以我正在检查滑块的当前位置是否等于它应该重置的点。

.slider-box {
    overflow: hidden;
    position: relative;
}
.slider-box ul {
    padding: 0px;
    margin: 0px;
    white-space: nowrap;
    position: absolute;
    left: 0px;
    right: auto;
}
.slider-box > ul > li {
    display: inline-block;
    border-radius: 5px;
}
.slider-small-box > ul > li > img {
    width: 270px;
    height: 200px;
    background-color: #333333;
    border-radius: 5px;
}
.slider-large-box > ul > li > img {
    width: 550px;
    height: 200px;
    background-color: #333333;
    border-radius: 5px;
}

function slider(x) {

    function loop() { //Sets repeating random value
        var rand = Math.round(Math.random() * (5000 - 1000)) + 1000;
        slider(x)
    }

    var size = $(x).parent().width() //Getting the size of the viewport div

    var rand = Math.round(Math.random() * (5000 - 1000)) + 1000; //Sets initial random value

    setTimeout( function() { //Animating the slider to the left with a random time
        $(x).animate({"left" : "-=" + size + "px"}, 2000)
        loop();
    }, rand);

    var width = 0;
    $(x).find('li').each(function() { //Finding the total width of the images
        width += $(this).outerWidth( true );
        return(width)
    });

    var offset = size - width + "px"; //The point at which to reset the slider

    var pos = $(x).position().left + "px"; //The current left position of the slider

    var $this = $(this)
    if(pos == offset) {
        console.log("Loop"); //This gets called out
        $this.animate({"left" : "0px"}); //This doesn't set the css value
    };
}


$(function() {
    $("ul.slider-ul").each(function() {
        $this = $(this)
        slider($this)
    });
 });

function slider(x) {    

    var rand = Math.round(Math.random() * (5000 - 1000)) + 1000;
    
    // go to left
    setTimeout(function () {
        var size = x.parent().width();
        var futureLoc = x.offset().left + x.outerWidth(true) - size;
        var parentLoc = x.parent().offset().left;
        if (futureLoc <= parentLoc) {
            console.log("Loop");
            x.animate({
                "left": "0px"
            },function(){slider(x);});
        } else {
            x.animate({
                "left": "-=" + size + "px"
            }, 2000,function(){slider(x);});
        }
    }, rand);
}


$("ul.slider-ul").each(function () {
    slider($(this));
});