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

Answer 2

以下是基于我的评论（主要是伪代码）的示例：

$(function(){
    var boxes = $('.box'),
        current = 0,
        timer;

    // Handler responsible for animation, either from clicking or Interval
    function animation(direction){
        if (direction === 1) {
            // Set animation properties to animate forward
        } else {
            // Set animation properties to animate backwards
        }

        if (current === 0 || current === boxes.length) {
            // Adjust for first/last
        }

        // Handle animation here
    }

    // Sets/Clears interval
    // Useful if you want to reset the timer when a user clicks forward/back (or "pause")
    function setAutoSlider(set, duration) {
        var dur = duration || 2000;
        if (set === 1) {
            timer = setInterval(function(){
                animation(1);
            }, dur); 
        } else {
            clearInterval(timer)
        }
    }

    // Bind click events on arrows
    // We use jQuery's event binding to pass the data 0 or 1 to our handler
    $('.right').on('click', 1, function(e){animation(e.data)});
    $('.left').on('click', 0, function(e){animation(e.data)});

    // Kick off animated slider
    setAutoSlider(1, 2000);

玩得开心！如果您有任何疑问，请随时提出！

自动启动jQuery滑块

2 个答案: