[JavaScript] jQuery - slider Opcje

[bahh]

Mam 6 divów o klasach .s, .s2, .s3, .s4, .s5, .s6

Wszystkie są display:none;

1. Przy załadowaniu strony, .s, .s2 są na display:block oraz dodawana jest im klasa animated bounceInLeft.
2. Po 5 sekundach, zmienia się im klasę na animated bounceOutLeft a po 0,8 sekundy .s3, .s4 są na display:block oraz dodawana jest im klasa animated bounceInLeft.
3. Po 10 sekundach, zmienia się im klasę na animated bounceOutLeft a po 0,8 sekundy .s5, .s6 są na display:block oraz dodawana jest im klasa animated bounceInLeft.

Teraz powinna być pętla, cały czas wykonywane są te trzy punkty. Mój kod:

[HTML] pobierz, plaintext 
window.onload = function() {
    var time = 3000;
    $('.s').css({'display':'block'}); 
    $('.s').addClass('animated bounceInLeft');
    setTimeout(function(){
      $('.s2').css({'display':'block'}); 
      $('.s2').addClass('animated bounceInLeft');  
    }, 300); 
 
    setTimeout(function(){
      $('.s').addClass('animated bounceOutLeft');
      setTimeout(function(){
        $('.s2').addClass('animated bounceOutLeft');
      }, 300); 
      setTimeout(function(){
        $('.s3').css({'display':'block'});
        $('.s3').removeClass('animated bounceOutLeft'); 
        $('.s3').addClass('animated bounceInLeft');
        setTimeout(function(){
          $('.s4').css({'display':'block'});
          $('.s4').removeClass('animated bounceOutLeft'); 
          $('.s4').addClass('animated bounceInLeft');
        }, 300);           
      }, 800);
    }, time);
 
    setTimeout(function(){
      $('.s3').addClass('animated bounceOutLeft');
      setTimeout(function(){
        $('.s4').addClass('animated bounceOutLeft');
      }, 300); 
      setTimeout(function(){
        $('.s5').css({'display':'block'}); 
        $('.s5').removeClass('animated bounceOutLeft');
        $('.s5').addClass('animated bounceInLeft');
        setTimeout(function(){
          $('.s6').css({'display':'block'}); 
          $('.s6').removeClass('animated bounceOutLeft');
          $('.s6').addClass('animated bounceInLeft');
        }, 300);           
      }, 800);
    }, 2*time); 
 
    setTimeout(function(){
      $('.s5').addClass('animated bounceOutLeft');
      setTimeout(function(){
        $('.s6').addClass('animated bounceOutLeft');
      }, 300); 
      setTimeout(function(){
        $('.s').css({'display':'block'});
        $('.s').removeClass('animated bounceOutLeft'); 
        $('.s').addClass('animated bounceInLeft');
        setTimeout(function(){
          $('.s2').css({'display':'block'});
          $('.s2').removeClass('animated bounceOutLeft');
          $('.s2').addClass('animated bounceInLeft');
        }, 300);           
      }, 800);
    }, 3*time);          
}
[HTML] pobierz, plaintext 

ale nie wiem jak ustawić powtarzanie się tego. Przy okazji, gdy wszystkie klasy dostaja addClass('animated bounceOutLeft'); musi być przed addClass('animated bounceInLeft'); zrobiony removeClass('animated bounceOutLeft'); żeby animacja zadziałała.

Ten post edytował bahh 10.11.2014, 12:21:04

[trueblue]

Źle się do tego zabrałeś.
Jeśli będziesz mieć więcej slajdów, to będziesz dodawał dla nich kolejny fragment kodu?
Być może nie będzie więcej, co nie zmienia faktu, że powinieneś zrobić kod wywoływany wewnątrz setInterval, tam dwa slajdy chować, dwa kolejne wysuwać. Jeśli brak kolejnych dwóch slajdów, to resetujesz licznik i pobierasz dwa pierwsze.