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:
oraz przykładowy plik XML:TytułLoading slides...
Mam nadzieję, że przykład okazał się przydatny. Wszelkie uwagi mile widziane.Tytul pierwszego slajdu Tekst pierwszego slajdu Tytul drugiego slajdu Tekst drugiego slajdu
0 komentarze:
Prześlij komentarz