javascript - 自动启动 jQuery slider

Question

我正在使用一个脚本，该脚本在向左或向右单击下一个 div 时进行动画处理。它目前工作正常，但我希望为其添加两个功能。我需要它重复回到第一张幻灯片，如果它被点击通过最后一张幻灯片，如果从第一张幻灯片返回，则转到最后一张幻灯片。另外，我有兴趣让它在页面加载时自动启动。

我试过将点击包装在一个函数中并设置一个 setTimeout，但它似乎没有用。动画当前正在使用 CSS。

这是当前的 JS:

<script>
jQuery(document).ready(function() {
var boxes = jQuery(".box").get(),
    current = 0;    

jQuery('.right').click(function () {
    if (current == (-boxes.length + 1)){
        } else {
        current--;
    updateBoxes();
    }
console.log(-boxes.length + 1);
    console.log(current);
});

jQuery('.left').click(function () {
    if (current === 0){
    } else{
    current++;
    updateBoxes();
    }
});

function updateBoxes() {
    for (var i = current; i < (boxes.length + current); i++) {
        boxes[i - current].style.left = (i * 100 + 50) + "%"; 
    }

}
});
</script>

如果我需要 jsfiddle 以获得更好的表示，请告诉我。到目前为止，我认为代码非常简单，可以在点击时设置动画。

谢谢。

Answer 1

尝试

jQuery(document).ready(function () {
    var boxes = jQuery(".box").get(),
        current = 0,
        timer;

    jQuery('.right').click(function () {
        if (current == (-boxes.length + 1)) {
            current = 0;
        } else {
            current--;
        }
        updateBoxes();
    }).click(); //initialize the view

    jQuery('.left').click(function () {
        if (current === 0) {
            current = -boxes.length + 1;
        } else {
            current++;
        }
        updateBoxes();
    });

    function updateBoxes() {
        //custom implementation for testing
        console.log('show', current)
        $(boxes).hide().eq(-current).show();

        autoPlay();
    }

    function autoPlay() {
        clearTimeout(timer);
        //auto play
        timer = setTimeout(function () {
            jQuery('.right').click();
        }, 2500)
    }

});

演示:Fiddle