Div слайдер. Добавить таймер 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); 
}); 

Это довольно легко. Сохраняя индекс, проще рассчитать следующее и предыдущее смещение. Разделение всей анимации на отдельную функцию, код не становится легче читать и понимать, но проще позвонить.