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:
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