Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slideshow</title>
    <style type="text/css">
        .wrapper {
            width: 640px; /* Dimenzije kontejnera... */
            height: 480px; /* ...moraju da budu eksplicitno zadate da bi funkcionisalo... */
            margin: 1em auto; /* ...ovo centriranje sa auto za horizontalne margine. */
            padding: 0;
            list-style: none; /* Ovo uklanja ružna dugmad oko <ul> liste. */
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <!-- Možeš da koristiš i lokalnu verziju jQuery biblioteke -->
    <script>
        $(document).ready(function(){
            /*
            * Ceo ovaj blok biće izvršen tek nakon što browser učita kompletan kod stranice.
            * Za taj trenutak se obično kaže da je učitan DOM.
            * To je najraniji trenutak kada može da se krene sa manipulacijom stranice a da
            * ne dođe do potencijalnog problema da objekat kojim treba da se manipuliše još
            * uvek ne bude dostupan na stranici.
            */
            // Prvo podesimo par promenjljivih.
            var duration = 5000; // Koliko svaka slika treba da bude prikazana (u milisekundama).
            var transition = 1000; // Koliko treba da traje prelaz animacije između slika (u milisekundama).

            var images = $('.wrapper img'); // Sada napravimo listu svih dostupnih slika (objašnjenje u sledećem blok komentaru).
            /*
            * $() je skraćeni oblik za jQuery(), svaki put kad se pozove od sadržaja unutar zagrada (to su obično CSS selektori)
            * se kreira jQuery objekat (preciznije se kaže kolekcija) od objekata koje će vratiti  '.images img' selektor.
            * '.images img' kaže "selektuj sve img tagove (elemente) koji se nalaze unutar elemenata sa klasom .images".
            */
            if(!images.length){ // Proveravamo da li uopšte ima dostupnih slika.
                /*
                * Ukoliko nema dostupnih slika 'return false;' se brine o tome da se dalje izvršenje ove funkcije prekine.
                * Zašto, to je već malo komplikovanija materija koja ovde nije bitna.
                */
                return false;
            }

            var currImage = 0; // Sadrži redni broj trenutno prikazane slike (zbog jQuery 'eq' funkcije korisno je da brojanje počne od nule).
            images.not(':first').hide(); // Sakrivamo sve slike osim prve ('images' je već kolekcija svih slika)

            /*
            * Sada kreiramo nešto što se zove interval. Interval će ponavljati (izvršavati) zadatu funkciju
            * u identičnim vremenskim intervalima (gore definisana promenjljiva 'duration') sve dok interval
            * ne prestane da postoji (recimo obriše se).
            */
            var intervalID = setInterval(function(){
                /*
                * Ovo je telo funkcije koje će se izvršavati na svakih 'duration' milisekundi.
                * Pošto funckija nema naziv ovako napisana se još zove anonimna.
                * Sledeći blok odrađuje animaciju sakrivanja trenutne i prikazivanja sledeće slike u nizu.
                */
                images.eq(currImage).fadeOut(transition, function(){
                    /*
                    * Ukoliko smo sakrili poslednju sliku u nizu (redni broj trenutne slike identičan broju slika - 1)
                    * resetujemo brojač tako da sledeća slika bude prva slika u kolekciji.
                    */
                    if(currImage == images.length - 1){ // images.length - 1 zato što nam numeracija slika počinje od nule!
                        currImage = 0;
                    } else {
                        currImage++; // U suprotnom sledeća slika je sledeća po redu u kolekciji.
                    }
                    images.eq(currImage).fadeIn(transition);
                })
            }, duration);

        });
    </script>
</head>
<body>
    <ul class="wrapper">
        <li><img src="http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg" alt="" width="640" height="480"></li>
        <li><img src="http://pioneers.io/wp-content/uploads/2013/07/space_post_ccflickr.jpg" alt="" width="640" height="480"></li>
        <li><img src="http://blinkenlichten.org/blog/wp-content/uploads/2011/05/balloon_aerial_space.jpg" alt="" width="640" height="480"></li>
        <li><img src="http://img.brothersoft.com/screenshots/softimage/s/space_exploration_3d_screensaver-34569-1.jpeg" alt="" width="640" height="480"></li>
        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQzVx0-TG5Wob5EhMWEC0dDEhYPnM7B7pYXNa8qgM2C1jeLpbUE4g" alt="" width="640" height="480"></li>
    </ul>
</body>
</html>