Slideshow

[Jole0]

Ne znam javascript, pa bih molio, ako neko ima volje da mi objasni ša znači (izvršava) koji deo koda ovog slajdera.
Hvala unapred na odvojenom vremenu!

 

[ays]

Necu ti objasnjavati svaku liniju pojedinacno, vec samo one koji ce ti trebati da razumes funkcionalnosti iza doticnog koda.

var interval = 3 * 20 //broj sekundi izmedju promena

var images = document.getElementsByTagName("img"); //nadji sve elemente koji imaju 'img' tag

var imageCount = images.length //prebroj koliko je elementa nadjeno u liniji iznad

var imageArray = []; //definisi prazan niz

To ti je sto se tice promenljivih... a sada funkcije:

var randomize = function() ...

Ova linija koda je deklaracija funkcije "randomize" koja defakto ti vraca -1, 0 ili 1 vrednosti.

sada petlja:

for(var i = 0; i < imageCount; i++) {
images[i].className = 'fade-out'; // za svaki element iz niza 'images' dodeli im klasu 'fade-out'
imageArray[i] = images[i]; // defakto kopiraj ceo niz, sa dodeljenom klasom, u drugi niz
}

imageArray.sort(randomize); // sortiraj niz prema random broju koji ti vrati funkcija 'randomize'

 

[ays]

A sada ova "fade" funkcija

var fade = function() {
imageArray[current++].className = 'fade-out'; // nakon sto uvelicas promenljivu 'current' za 1 i nadjes prema tom indeksu element u nizu 'imageArray', dodeli mu klasu sa nazivom 'fade-out'

if (current == imageCount) { // ako je vrednost promenljive 'current' jednaka vrednosti broju elementa koji se nalazi u 'imageCount'
current =0; // defakto vrati vrednost promenljive 'current' na 0 (sto je ujedno i pocetna vrednost)
imageArray.sort(randomize);
}

imageArray[current].className = 'fade-in'; // nadji element u nizu 'imageArray' koji se nalazi na indeksu koji je jednak vrednosti promenljive 'current' i dodeli mu klasu 'fade-in' (ovo ukratko znaci da ce prikazati ovaj element)

setTimeout(fade, interval * 100); // postavi timeout za funkciju 'fade' (bukvalno samo na sebe) sa interval od 6000(3 * 20 * 100) sto je 6s.
};

fade(); // pokreni funkciju prvi put

Nadam se da sam ti uspesno objasnio sta se zbiva u doticnom kodu...

p.s.
bilo bi kul da ovakva pitanja postavljas na devops.rs (pogledaj u moj potpis) jer tamo mozemo lakse i brze da ti se odgovori. 😉

 

[Jole0]

Hvala na odvojenom vremenu za objašnjenje koda. Do sada nisam ni znao da postoji "DevOps" pa ću od sada i da koristim vaše strane, jer vidim, na prvi pogled, da ima mnogo zanimljivog štiva. Nadam se da mi niko neće zameriti, jer sam samo hobista i ne živim od web dizajna, a verovatno nikada ni neću, jer da bi živeo od ovog, moraš biti 100% posvećen i pratiti trendove. Ali, više znanja, nije nikada na odmet.
U svakom slučaju , još jednom Hvala na pojašnjenju primera koda!