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);
});

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

Div滑块。添加5秒的计时器以自动滑动

1 个答案: