Curseur de l'image pour la lecture automatique

Question

J'essaie de faire en sorte que mon propre curseur d'image soit lu automatiquement avec un intervalle de 4000 millisecondes. J'ai essayé d'utiliser setTimeout mais je n'arrive pas à le faire fonctionner. J'apprécierais que quelqu'un puisse m'aider. Voici par exemple du curseur:

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

Toute idée comment je peux obtenir à la lecture automatique?

Voici le code 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'}) 
     } 
    }; 

}); 

Merci, Matthew

Answer 1

j'ai pu mettre en place une exécution automatique qui fonctionne assez bien, en utilisant une combinaison de setTimeout et récursivité.

J'ai donné à la fonction nextimage() un paramètre autoplay, qui est un booléen. Ensuite, j'ai ajouté la ligne suivante à la fin de la fonction:

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

Enfin, j'ajouté cette ligne à la fin du script, pour obtenir la boucle autoplay aller:

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

Découvrez la démo ici, construit principalement à partir de ce que vous avez fourni, avec quelques modifications pour faire l'autoplaying: http://jsfiddle.net/bVjkP/

En bref, vous passez un booléen dans la fonction nextimage(), pour lui dire si oui ou non pour commencer une autoplay. Ensuite, vous appelez simplement un setTimeout initial pour lancer le processus. L'astuce avec cette méthode est que vous devez appeler une fonction anonyme via setTimeout, qui appelle la fonction nextimage avec autoplay défini sur true, car vous ne pouvez pas passer de paramètres lors de l'appel d'une fonction avec setTimeout. Ceci est similaire à la méthode de liaison de fonctions à des événements tels que le clic ou le survol à l'aide de jQuery.