Zadatak br.1:  Malo drugačiji slajder za slike

Kreirati web stranicu na kojoj se smenjuju slike jedna za drugom u vremenskom intervalu od 2 sekunde (2000ms). 

Nakon prikaza poslednje slike u nizu prikazuje se ponovo prva slika.

(Slike možete preuzeti sa: slike.zip).

Slike postaviti na stranicu na sledeći način:

  <div id=”slike”>
    <img src="slike/slika1.jpg"></img>
    <img src="slike/slika2.jpg"></img>
    <img src="slike/slika3.jpg"></img>
    <img src="slike/slika4.jpg"></img>

  </div>

( Napomena: ovo je neispravan način za postavljanje slika - po novom standardu nema zatvarajućeg taga ! )

Saveti za rešavanje zadatka:

Na početku postaviti u CSS da su sve slike na početku providne (da se ne vide), i da se sve nalaze na istom mestu, jedna preko druge

ili pomoću postavljanja pozicije i dimenzija za div u kojem su, pa da slike "popune" taj div (ovo je preporučeni način)

ili pomoću postavljanja identičnih opcija za sve slike na stranici, kao na primer:

  • img {
        height: 400px;
        width: auto;
        position: absolute;
        left: 200px;
        top: 200px;
       
    }
Zatim sve ostalo uraditi u JavaScriptu:

kreirati niz slika:   
var slike = document.getElementsByTagName('img');
A sa nizom slika se radi kao i sa bilo kojim nizom......

postaviti globalnu promenljivu koja će predstavljati indeks slike koja se trenutno prikazuje i na  početku ga postaviti na nulu - za prikaz slike[0]
var index = 0;
Prikaz jedne slike/stavke se onda može vršiti na osnovu vrednosti indeksa

  • function prikazJedneStavke() {
        for (var i = 0; i < slike.length; i++) {
             if (i === indeks) {
                slike[i].style.opacity = 1;
         } else {
                slike[i].style.opacity = 0;
                 }
          }
      }
Ovaj prikaz jedne stavke se može koristiti na više načina. Predlog je da se pozove u nekoj funkciji višeg nivoa, a nakon toga da se vrednost indeksa uveća za 1. Da ne bi vrednost indeksa prešla granice indeksa za niz slika, predlog je da se za svaki slučaj koristi operator za računanje ostatka pri deljenju sa brojem slika:

   function prikazSvega(){
       prikazJedneStavke();
       indeks = (indeks + 1) % slike.length;
   }

Nakon kreiranja funkcije, potrebno ju je i pozvati - da bi se izvršila:

prikazSvega();

Na ovaj način će se funkcija izvršiti samo jednom, a nama je potrebno da se izvršava preiodično, svakih 2000ms - i za to je predlog da se koristi Interval:

setInterval(prikazSvega, 2000);

Nakon ovoga bi trebalo da se slike smenjuju na stranici ....

**********************

Dodatak br 1: Ispod slika treba da se nalaze indikatori u obliku kružića koji prikazuje koja od slika je trenutno prikazana.

Predlozi za rad:

za kružiće se može postavit bilo šta, ali ćemo u ovom primeru koristiti najobičnije dugmiće - dodati potreban broj dugmića, a izgled i poziciju postaviti u CSS:

HTML CSS
<div id="dugmici">
        <button></button>
        <button></button>
        <button></button>
        <button></button>
    </div>
button{
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 10px;
    position: relative;
    top: 650px;
    left: 250px;
}
Druga varijanta bi bila  da se koristi neki div element u kojem bi bili svi dugmići i onda da se taj div element postavi negde na stranicu ....
 
E sada, pošto smo već radili sa nizom slika, mogli bi da radimo i sa nizom dugmića:

       var dugmici = document.getElementsByTagName('button');

Pošto smo već radili sa globalnim indeksom, možemo postaviti i da se prilikom prikazivanja i sakrivanja slika ujedno vrši i promena boje dugmića (dodati uz slike):

dugmici[i].style.background = "red";  // za aktivno dugme, a za neaktivno koriatiti drugu boju, kao na primer "gray"
******
 

Napomena: Nigde se ne traži da se klikom na kružić promeni slika pa to nećemo ni raditi !

**********************

Dodatak br.2: Prilikom prikaza slike, korišćenjem CSS osobine "opacity" kreirati efekat gde slika od potpuno providne postepeno (u roku od 1 sekunde) postane potpuno vidljiva.

Predlog: dodati samo jednu liniju u CSS za  slike - za tranziciju  - i ne komplikovati dalje ....

transition: opacity 1000ms;

**********************

Dodatak 3: Potrebno je da se istovremeno sa smenom slika u slajderu, u divu pored slike prikazati i podatke o aktivnoj slici (ukratko - naziv, opis i slično)

U fajlu pored slika se nalazi malo duži opis - uzmite odatle šta vam se svidi .....

Ovo može da se radi na gomilu načina, ali će ovde biti predložen samo jedan (i to ne baš naročito elegantan)

Postaviti za svaki opis poseban div blok sa opisom. Svaki od div blokova postaviti da pripada istoj klasi i postavit ih na isto mesto na web stranici.

Pošto već koristimo nizove, napraviti niz opisa i na početku ih sve sakriti - prikazivati samo onaj div koji ima isti indeks kao i slika ....

var opisi = document.querySelectorAll('.opis');
.....

HTML CSS JS
<div class="opis"> opis 0</div>
    <div class="opis">
        <h1>opis 1</h1>
        <p>opissss</p>
    </div>
    <div class="opis"> opis 2</div>
    <div class="opis"> opis 3 </div>
.opis {
    height: 400px;
    width: 200px;
 
    position: absolute;
    left: 600px;
    top: 200px;
   
    opacity: 0;
    background-color: bisque;
}
 var opisi = document.querySelectorAll('.opis');



// .....

// ista akcija kao i za slike
// upotrebiti petlju koju već imate



Last modified: Tuesday, 27 May 2025, 1:01 PM