U trendu

JavaScript – Pozadinski slideshow

Krstarica

Donosimo vam prikaz vrlo efektivnog JavaScript koda, koji će vam omogućiti da kreirate slideshow u pozadini vaših stranica (background-u) tj. „ispod“ sadržaja samih stranica. Korišćenjem odgovarajućeg style skripta, slike se prikazuju samostalno unutar površine stranica. Ovaj efekat je podržan u Internet Explorer-u 4.0 i novijim verzijama, i Netscape-u 6.0.

Prvo što treba da uradimo je da definišemo pozadinski stil: 



 <style>

 body{

 background-repeat: no-repeat;

 background-position: 200 100;

 }

 </style>

Ovom definicujom, koju treba da smesite unutar HEAD taga, podešavamo poziciju (koordinate X i Y) pozadinskog sloja u kome će biti smeštene slike slideshow-a, u odnosu na samu stranicu. Odmah ispod ove definicije dodajte sledeći JavaScript kod: 



 <SCRIPT LANGUAGE=“JavaScript“>

 <!– Begin

 // brzina u millisekundama

 var brzina = 1000


 // Definisanje slika za slideshow

var Slika = new Array()

Slika[0] = ‘1.gif’

Slika[1] = ‘2.gif’

Slika[2] = ‘3.gif’

Slika[3] = ‘4.gif’


 var t

var j = 0

var velicina = Slika.length


 var ucitavanje = new Array()

for (i = 0; i < velicina; i++){

ucitavanje[i] = new Image()

ucitavanje[i].src = Slika[i]

}


 function pokreniSlideShow(){

if (document.body){

document.body.background = Slika[j];

j = j + 1

if (j > (velicina-1)) j=0

t = setTimeout(‘pokreniSlideShow()’, brzina)

}

}

// End –>

</SCRIPT>

Preostaje vam da još samo u BODY tag ubacite obrađivač događaja „onLoad“ i poziv funkcije „pokreniSlideShow()“: 



  <BODY OnLoad=“pokreniSlideShow()“>

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.