jquery - 分区滑块。将 5 秒的计时器添加到自动滑动

Question

我有一个运行良好的 div 滑块：http: //jsfiddle.net/UqSFr/2/

基本功能是这样的：

$("#NextButton").click(function(e) { 
e.preventDefault();
if ( $("#h_wrapper").is(':not(:animated)') && $("#NextButton").is(':not(:animated)') ) {
    var newMargin = CurrentMargin() - SlideWidth;
    $("#h_wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() }); 
}
});

除了点击功能外，我还想添加一个计时器，所以如果 5 秒内没有点击，它应该移到下一个。

计时器应在点击时重置

到达终点时，它必须转到第一个 div (marginLeft = 0)

Answer 1

看看这段代码

$(document).ready(function(e) {
    var index = 0;
    var count = $('#h_wrapper').children().length; // set this value dynamically

    var interval = setInterval(next, 1000); // create the interval

    // move to next slide
    function next() {
        index = (index + 1) % count;
        goto(index);
    }

    // move to previous slide
    function previous() {
        index = (index + count - 1) % count; // not too pretty, but it works
        goto(index);
    }

    // go to slide x
    function goto(x) {
        var margin = index * SlideWidth; // set offset by index + width

        $('#h_wrapper').stop().animate({ // stop cancels any running animations
            'margin-left': margin
        }, SlideSpeed, function(e) {
            SetNavigationDisplay();
        });
    }

    // set click handlers
    $("#NextButton").click(next);
    $("#PreviousButton").click(previous);
});

这很容易。通过保存索引，可以更轻松地计算下一个和上一个偏移量。将整个动画拆分成一个单独的函数，代码不会更容易阅读和理解，但也更容易调用。