U ovom jednostavnom, ali uvijek korisnom kodu, iskoristit ćemo funkciju setTimeout() koju smo upoznali u prethodnim tutorijalima. Napravit ćemo baner koji sam mijenja slike bez potrebe da korisnik osvježi prozor. Ovaj kod se koristi kada želite prikazati više reklamnih oglasa u jednom okviru. Pa krenimo sa JavaScript kodom kojeg ćemo naknadno objasniti. Donji kod stavite u <head> dio HTML stranice.
<script language="Javascript" type="text/javascript">
PoljeSlika = new Array
("slike/baner1.jpg","slike/baner2.jpg","slike/baner3.jpg");
TrenutnaSlika = 0;
BrojSlika = PoljeSlika.length;
function Izmjena()
{
if (BrojSlika > 1)
{
TrenutnaSlika = TrenutnaSlika + 1;
if (TrenutnaSlika == BrojSlika)
{
TrenutnaSlika = 0;
}
document.getElementById("baner").src=
PoljeSlika[TrenutnaSlika];
setTimeout("Izmjena()", 5000);
}
}
</script>
Na samom početku koda smo definirali polje PoljeSlika u koje zapisujemo sliku po sliku. Ovdje možete zapisati bilo koji broj slika unutar navodnika te svaku sliku odvojiti zarezom. Nakon toga definiramo varijablu TrenutnaSlika i postavljamo u početnu vrijednost nula. Postavljamo je na nula jer prvoj slici u polju pristupamo sa PoljeSlika[0]. Od početnih varijabli moramo postaviti i varijablu koja će pokazivati koliko ima slika u polju. Za to smo definirali varijablu BrojSlika u koju smo sa funkcijom PoljeSlika.length pridodali broj slika u polju. Do sada imamo postavljene samo početne vrijednosti. Sada idemo na JavaScript funkciju Izmjena() koja će mijenjati slike u baneru.
Da bi ova funkcija mogla mijenjati slike moramo imati više od jedne slike u polju. To provjerava prvi if() uvijet. Ako Ima više od jedne slike onda povećaj TrenutnaSlika za jedan te provjeri da li smo došli do kraja polja slika (drugi if() uvijet). Ako smo došli do zadnje slike vrati TrenutnaSlika na 0 tj. na prvu sliku u polju. Red koda koji kaže pregledniku koju sliku da prikaže je:
document.getElementById("baner").src = PoljeSlika[TrenutnaSlika];
Ovdje vidimo kako se pristupa slici i njezinom atributu src. Taj atribut jednostavno promijenimo i preglednik će prikazati tu sliku. Nakon što smo promijenili sliku ovu potrebno je pozvati ponovno ovu funkciju nakon nekog vremena. Ovdje koristimo kod:
setTimeout("Izmjena()", 5000);
Ova funkcija će pozvati Izmjena() nakon 5 sekundi tj. 5000 mili sekundi. I sa ovim kodom se stalno vrtimo u krug po polju i prikazujemo slike iz polja.
Na kraju nam ostaje još da napravimo kod koji ide u <body> dio HTML stranice i koji prikazuje sliku.
<img src="10.png" id="baner" name="baner" alt="Rotacijski baner" />
<script language="Javascript" type="text/javascript">
Izmjena();
</script>
Prvi red koda je ustvari naš baner u kojem mijenjamo slike iz polja. Ispod njega se nalazi kod koji pri učitavanju stranice prvi put pozove Izmijeni() funkciju. Nakon prvog poziva ove funkcije ona nastavlja samu sebe pozivati svako 5 sekundi. Pogledajmo kako ovaj cijeli kod funkcionira:
<script language="Javascript" type="text/javascript">
PoljeSlika = new Array
("slike/baner1.jpg","slike/baner2.jpg","slike/baner3.jpg");
TrenutnaSlika = 0;
BrojSlika = PoljeSlika.length;
function Izmjena()
{
if (BrojSlika > 1)
{
TrenutnaSlika = TrenutnaSlika + 1;
if (TrenutnaSlika == BrojSlika)
{
TrenutnaSlika = 0;
}
document.getElementById("baner").src=
PoljeSlika[TrenutnaSlika];
setTimeout("Izmjena()", 5000);
}
}
</script>
Na samom početku koda smo definirali polje PoljeSlika u koje zapisujemo sliku po sliku. Ovdje možete zapisati bilo koji broj slika unutar navodnika te svaku sliku odvojiti zarezom. Nakon toga definiramo varijablu TrenutnaSlika i postavljamo u početnu vrijednost nula. Postavljamo je na nula jer prvoj slici u polju pristupamo sa PoljeSlika[0]. Od početnih varijabli moramo postaviti i varijablu koja će pokazivati koliko ima slika u polju. Za to smo definirali varijablu BrojSlika u koju smo sa funkcijom PoljeSlika.length pridodali broj slika u polju. Do sada imamo postavljene samo početne vrijednosti. Sada idemo na JavaScript funkciju Izmjena() koja će mijenjati slike u baneru.
Da bi ova funkcija mogla mijenjati slike moramo imati više od jedne slike u polju. To provjerava prvi if() uvijet. Ako Ima više od jedne slike onda povećaj TrenutnaSlika za jedan te provjeri da li smo došli do kraja polja slika (drugi if() uvijet). Ako smo došli do zadnje slike vrati TrenutnaSlika na 0 tj. na prvu sliku u polju. Red koda koji kaže pregledniku koju sliku da prikaže je:
document.getElementById("baner").src = PoljeSlika[TrenutnaSlika];
Ovdje vidimo kako se pristupa slici i njezinom atributu src. Taj atribut jednostavno promijenimo i preglednik će prikazati tu sliku. Nakon što smo promijenili sliku ovu potrebno je pozvati ponovno ovu funkciju nakon nekog vremena. Ovdje koristimo kod:
setTimeout("Izmjena()", 5000);
Ova funkcija će pozvati Izmjena() nakon 5 sekundi tj. 5000 mili sekundi. I sa ovim kodom se stalno vrtimo u krug po polju i prikazujemo slike iz polja.
Na kraju nam ostaje još da napravimo kod koji ide u <body> dio HTML stranice i koji prikazuje sliku.
<img src="10.png" id="baner" name="baner" alt="Rotacijski baner" />
<script language="Javascript" type="text/javascript">
Izmjena();
</script>
Prvi red koda je ustvari naš baner u kojem mijenjamo slike iz polja. Ispod njega se nalazi kod koji pri učitavanju stranice prvi put pozove Izmijeni() funkciju. Nakon prvog poziva ove funkcije ona nastavlja samu sebe pozivati svako 5 sekundi. Pogledajmo kako ovaj cijeli kod funkcionira:
No comments:
Post a Comment