Obtener control deslizante de imagen para reproducir automáticamente

Question

Estoy intentando que mi propio control deslizante de imagen se reproduzca automáticamente con un intervalo de 4000 milisegundos. Intenté usar setTimeout pero parece que no puedo hacerlo funcionar. Apreciaría si alguien pudiera ayudarme. Aquí es ejemplo de la corredera:

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

Alguna idea de cómo puedo conseguir que la reproducción automática?

Este es el código 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'}) 
     } 
    }; 

}); 

Gracias, Mateo

Answer 1

pude configurar una reproducción automática que funciona bastante bien, usando una combinación de setTimeout y recursividad.

Di la función nextimage() un parámetro autoplay, que es un booleano. Luego añade la siguiente línea al final de la función:

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

Finalmente añade esta línea al final de la secuencia de comandos, para obtener el bucle de reproducción automática va:

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

Prueba la demo aquí, construido principalmente a partir de lo que proporcionó, con algunas modificaciones para hacer la reproducción automática: http://jsfiddle.net/bVjkP/

En resumen, pasa un booleano a la función nextimage(), para indicarle si debe comenzar o no una reproducción automática. Entonces simplemente llama a un setTimeout inicial para que la bola ruede. El truco de este método es que debe llamar a una función anónima a través de setTimeout, que llama a la función nextimage con la reproducción automática establecida en true, porque no puede pasar parámetros cuando llama a una función con setTimeout. Esto es similar al método para vincular funciones a eventos como hacer clic o desplazarse con jQuery.