jQuery i slider z różnym czasem wyświetlania slajdów

piątek, 19 października 2012
Stworzenie standardowego slidera przy pomocy jQuery jest raczej proste. W moim przypadku, problem rozpoczął się, gdy czas wyświetlania poszczególnych slajdów był różny, wczytywany z pliku XML. Chciałbym przedstawić fragment kodu, który wykonuje to zadanie.

Oto cały kod:
animationTime = 1000; //czas trwania wszelkich animacji
xmlURLLocal = "adres/sample.xml";
XML = null; //zmienna globalna, uchwyt do XML'a
error = false; //czy wystapil error podczas pobierania slajdu
index = 0; //globalna zmienna, index, ktory obecnie slajd jest wyswietlany
var slidesDisplayed = 0;//liczba wyswietlonych slajdow
intervalTime = 3000; //domyslny czas wyswietlania 1 slajdu
myInterval = null; //globalny uchwyt do obiektu Interval, ktory odpowiada za okresowe wyswietlanie slajdow

//startujemy
function welcome() {
        $('#footer').hide(); //ukryj footer
        $('#main').hide().fadeIn(animationTime); //pokaz z animacja napis glowny
        $('#loading').hide().fadeIn(100, getXML); //pobierz XML
        if (error == false)
                $('#loading').hide().fadeIn(animationTime, parseXML);
}

//pobierz ajaxowo XML ze slajdami
function getXML() {
        $.ajax({
        type: "GET",
        url: xmlURLLocal,
        dataType: "xml",
        success: successXML, //jesli sukces
        error: errorXML //jesli error
        });
}

//jesli wystapil error podczas pobierania slajdu, wyswietl informacje o tym i ustaw zmienna globalna na true
function errorXML() {
        $('#loading').html("Wystapil blad podczas pobierania XML'a. SprawdŸ polaczenie z serwerem.");
        error = true;
}

//jesli z sukcesem pobrano XML bo piszemy o poprawnie wykonanej akcji i ustawiamy zmienna globalna z XMLem
function successXML(xml) {
        $('#loading').text("Poprawnie pobrano XML.");
        XML = xml;
}

//parsuj XML, co okreslony czas, ta funkcja powinna wykonac sie tylko raz, po kazdym pobraniu slajdu
function parseXML() {   
        if (error == false)
                myInterval = setInterval("getOneSlide()", intervalTime);
}

//funkcja do pobierania pojedynczego, kolejnego slajdu
function getOneSlide() {
        $('#footer').fadeIn(animationTime);
        
        var tab = $(XML).find("slide");//tablica ze slajdami
        var size = tab.length;//liczba slajdow w kolejce
        var slide = tab[index];//n-ty slajd
        intervalTime = parseInt($(slide).attr("delay")); //ustaw czas trwania slajdu
        
        //CO ILE MA POBIERAC NOWE SLAJDY???
        //obecnie pobiera nowy XML na przedostatnim slajdzie
        if (slidesDisplayed == size-1) {
                getXML(); //pobierz XML
                slidesDisplayed = 0; //wyzeruj licznik wyswietlonych slajdow
        }
        else {
                getTemplate(slide); //pobierz odpowiedni template
                
                $("#content").hide().html(htmlContent).fadeIn(animationTime); //wyswietl to, co przygotowal template
                
                //idz do nastepnego slajdu albo zacznij od poczatku
                if (index == tab.length-1) {
                        index = 0;
                }
                else {
                        index++;
                }
                
                slidesDisplayed++; //zwieksz licznik wyswietlonych slajdow
        }
        
        //wyczysc interval i utworz nowy, o danym czasie trwania delay'a
        clearInterval(myInterval);
        myInterval = setInterval("getOneSlide()", intervalTime);
}
Ustawienie wyświetlania slajdu przez dany okres czasu następuje w funkcji parseXML() w linii:
myInterval = setInterval("getOneSlide()", intervalTime);

Kluczowy w tym przykładzie jest następujący fragment:
//wyczysc interval i utworz nowy, o danym czasie trwania delay'a
        clearInterval(myInterval);
        myInterval = setInterval("getOneSlide()", intervalTime);
czyli metoda clearInterval, która czyści obecny interwał czasowy, dzięki czemu możemy utworzyć nowy, z nowym czasem wyświetlania slajdu. A dokładniej z czasem, po którym ma zostać wyświetlony nowy slajd. Kod html body:


        
Tytuł
Loading slides...
oraz przykładowy plik XML:

        
                Tytul pierwszego slajdu
                Tekst pierwszego slajdu
        
        
                Tytul drugiego slajdu
                Tekst drugiego slajdu
        

Mam nadzieję, że przykład okazał się przydatny. Wszelkie uwagi mile widziane.

0 komentarze:

Prześlij komentarz