[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.

[bahh]

jQuery to nowy temat dla mnie, dopiero się uczę na nim pisać kody. Będę wdzięczny za szerszą pomoc

[trueblue]

Pokaż strukturę html tego slidera.

[bahh]

To wersja jeszcze nie uproszczona:

[HTML] pobierz, plaintext 
<div style="font-size:56px; position:absolute; left:50%; margin-left:-498px; top:80px; text-transform:uppercase; letter-spacing: 0.05ex;" class="s"><span style="font-weight:900; padding-right:50px; color:#f1c40f;">aaa</div>
<div style="font-size:32px; position:absolute; left:50%; margin-left:-498px; top:210px; text-transform:uppercase; color:#f1c40f;" class="s2">bbb</div>
<div style="font-size:56px; position:absolute; left:50%; margin-left:-498px; top:80px; text-transform:uppercase; letter-spacing: 0.05ex;" class="s3"><span style="ccc</div>
<div style="font-size:32px; position:absolute; left:50%; margin-left:-498px; top:210px; text-transform:uppercase; color:#f1c40f;" class="s4">ddd</div>
<div style="font-size:56px; position:absolute; left:50%; margin-left:-498px; top:80px; text-transform:uppercase; letter-spacing: 0.05ex;" class="s5">eee</div>
<div style="font-size:32px; position:absolute; left:50%; margin-left:-498px; top:210px; text-transform:uppercase; color:#f1c40f;" class="s6">fff</div>
[HTML] pobierz, plaintext 

Trzeba uwzględnić w sumie sprawdzenie czy przeglądarka obsługuje animations inaczej zastosować animacje zdefiniowane w jquery

Animacje są z tego:
http://daneden.github.io/animate.css/

Chyba, że ma ktoś gotowy kod do jQuery w miarę krótki (bez przycisków itp)

Ten post edytował bahh 10.11.2014, 14:38:25

[trueblue]

http://jsfiddle.net/t708zzdj/1/
Musiałbyś pokombinować jak ustalić sytuację początkową - teraz wszystkie znikają z efektem animacji, i ewentualnie bawić się w przeróbkę tego w przypadku nieobsługiwania animacji CSS.