W3-SI.com     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Prikaz slik

Koda: 
<head>
<script type="text/javascript">
a=0
function gremo()
{
sirina=0
klic=setInterval("rolaj()",2)
}

function rolaj()
{
if (sirina<400)
   {
	 document.getElementById("plast1").style.backgroundImage=izvor="url(slike/foto"+a+".jpg)"
   document.getElementById("plast2").style.backgroundImage=izvor="url(slike/foto"+(a+1)+".jpg)"
	 sirina++
   document.getElementById("plast2").style.width=sirina+"px"
   }
else
   {
   clearInterval(klic)
	 a++
	 a=a%6
	 gremo()
   }
}
</script>


<style type="text/css">
div
{
position: absolute;
left:250px;   //poljubna pozicija
top: 20px;   //poljubna pozicija
height: 300px; //dimezija slike
width:400px;   //dimezija slike
overflow:hidden;
}

#plast1
{
z-index:10;
width:400px;
background-image:url(slike/foto0.jpg);
}

#plast2
{
z-index:20;
}

#plast3
{
z-index:0; //plast je na dnu, le zaradi tekočega predvajanja
width:400px;
background-image:url(slike/foto0.jpg);
}
</style>
</head>

<body>
<div id="plast1">&nbsp;</div>
<div id="plast2">&nbsp;</div>
<div id="plast3">&nbsp;</div>
</body>
Izgled v
brskalniku:

Ogled v novem oknu

Razlaga: Ob kliku na zgornje besedilo se požene metoda gremo(), ki nastavi dogodek, ki vsaki 2 milisekundi požene metodo rolaj(). Ta metoda nastavi najprej ozadji dvema div elementoma (imenovana plasti). Ozadji sta odvisni od spremenljivke a, ki je nastavljena tako, da na začetku kaže na prvo sliko. Plasti sta urejeni tako, da je plast 1 (plast1) za plastjo 2 (plast2). Tretja plast pri postopku nima posebne vloge. Metoda rolaj() vsakič, ko steče, razkrije 1 stolpec točk naslednje slike. Ko razkrije vse stolpce, prekine dogodek, ki jo zaganja vsaki 2 milisekundi, poveča spremenljivko a ter ustvari nov dogodek. Postopek se ponavlja, dokler ne pride do konca slik, nakar prične spet pri prvi sliki.

gor Gor     W3-SI     JavaScript     Primeri     Slike     Časovnik     Slogovne predloge

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart