Ottieni il dispositivo di scorrimento immagine per la riproduzione automatica

Question

Sto cercando di far muovere automaticamente il mio cursore immagine con un intervallo di 4000 millisecondi. Ho provato a utilizzare setTimeout ma non riesco a farlo funzionare. Lo apprezzerei se qualcuno potesse aiutarmi. Ecco esempio di dispositivo di scorrimento:

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

Tutte le idee come posso ottenere a riproduzione automatica?

Ecco il codice 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'}) 
     } 
    }; 

}); 

Grazie, Matthew

Answer 1

sono stato in grado di creare un autoplay che funziona abbastanza bene, utilizzando una combinazione di setTimeout e ricorsione.

ho dato il nextimage() funzionano un parametro autoplay, che è un valore booleano. Poi ho aggiunto la seguente riga alla fine della funzione:

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

Infine ho aggiunto questa riga alla fine dello script, per ottenere il ciclo di riproduzione automatica in corso:

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

Controllare la demo qui, costruito principalmente da quello che hai fornito, con alcune modifiche alla riproduzione automatica: http://jsfiddle.net/bVjkP/

In breve, si passa un valore booleano alla funzione nextimage(), per indicare se avviare o meno una riproduzione automatica. Quindi chiami semplicemente un setTimeout iniziale per far rotolare la palla. Il trucco con questo metodo è che devi chiamare una funzione anonima attraverso il setTimeout, che chiama la funzione nextimage con autoplay impostato su true, perché non puoi passare parametri quando chiami una funzione con setTimeout. Questo è simile al metodo per associare funzioni ad eventi come click o hover usando jQuery.