Получить слайдер изображения для автоматического воспроизведения

Question

Я пытаюсь получить свой собственный слайдер изображения для автоматического воспроизведения с интервалом в 4000 миллисекунд. Я пробовал использовать setTimeout, но я не могу заставить его работать. Буду признателен, если кто-то сможет мне помочь. Вот пример слайдера:

http://www.matthewruddy.com/slider-intervalissue/

Любые идеи, как я могу получить его для автоматического воспроизведения?

Вот код JQuery:

$(document).ready(function(){ 
    var images = $('.slider li'); 
    var slides = images.length; 
    var sliderwidth = 500; 
    var currentimage = 0; 
    var containerwidth = sliderwidth*slides; 
    var autoplay = 4000; 

    $('.slider').css('width', containerwidth); 

    $('#next').bind('click',nextimage); 

    function nextimage(){ 
     if(currentimage<slides-1){ 
      currentimage++; 
      $('.slider').animate({left:-sliderwidth*(currentimage)},{duration:800,easing:'easeInOutCubic'}); 
     } 
     else{ 
      currentimage = 0; 
      $('.slider').animate({left:0},{duration:800,easing:'easeInOutCubic'}) 
     } 
    }; 

}); 

Спасибо, Matthew

Answer 1

я смог настроить автозапуск, который работает довольно хорошо, используя комбинацию SetTimeout и рекурсии.

Я дал функции nextimage() параметр autoplay, который является булевым. Затем я добавил следующую строку в конце функции:

if (autoplay) { setTimeout(function() { nextimage(true); }, 4000); } 

Наконец я добавил эту строку в конце сценария, чтобы получить цикл автозапуска происходит:

setTimeout(function() { nextimage(true); }, 4000); 

Заканчивать демонстрационную здесь, построенный в основном из того, что вы предоставили, с несколькими изменениями для автовоспроизведения: http://jsfiddle.net/bVjkP/

Короче говоря, вы передаете логическое значение в функцию nextimage(), чтобы сообщить, начать ли автовоспроизведение или нет. Затем вы просто вызываете начальный setTimeout, чтобы получить мяч. Трюк с этим методом заключается в том, что вы должны вызывать анонимную функцию через setTimeout, которая вызывает функцию nextimage с параметром autoplay, установленным в true, потому что вы не можете передавать параметры при вызове функции с помощью setTimeout. Это похоже на метод привязки функций к событиям, таким как щелчок или зависание с помощью jQuery.