Målet med dette eksempel og de følgende er at lave et egentligt diasshow, der kan styres af brugeren.
Brugerstyring af et slideshow har med følgende forhold at gøre:
<div id="borderdiv"> <img src="pix/pix1.jpg" alt="..." id="pix" width="276" height="185" /></div>
Bemærk her, at der ikke må være noget linieskift i kildekoden mellem billedet og afslutningen af den div, der omslutter billedet.
Dette element er der udelukkende af kosmetiske årsager,
det vil sige for at kunne sætte en border
omkring billedet.
Under billedet følger seks kasser på formen:
<div class="text" id="pixtext1"> Billede nr. 1 </div>
– der formateres af et stylesheet:
.text { font-family:arial; font-size:90%;
font-weight:bold; display:none; margin:1em 0;}
Med dette mener jeg de links, der udløser de forskellige funktioner. Kildekoden til disse ser således ud:
<div class="panel"> <p> <a href="#" onclick="prev();return false;">Forrige</a> | <a href="#" onclick="next();return false;">Næste</a> | <a href="#" onclick="auto();return false;">Auto</a> | <a href="#" onclick="stop();return false;">Stop</a> </p> </div>
Tilbage står så kun at lave et script, der omfatter de forskellige funktioner.
var antal=6; var nr=1; var running = 0; var images = new Array() for(i = 1; i < antal + 1; i++){ images[i] = new Image(); images[i].src = "pix/pix" + i + ".jpg"; } function prev() { skjulAlle(); nr=nr-1; if (nr==0) nr=antal; document.images.pix.src = images[nr].src; document.getElementById('pixtext' + nr).style. --> display="block"; } function next(){ skjulAlle(); nr=nr+1 if (nr==antal + 1) nr=1 document.images.pix.src = images[nr].src document.getElementById('pixtext' + nr).style. --> display="block"; } function skjulAlle(){ for (i = 1; i < antal + 1; i++) { document.getElementById('pixtext' + i).style. --> display="none"; } } function auto(){ next() timer = setTimeout('auto()',2000) running=1 } function stop(){ if (running == 1){ clearTimeout(timer) nr=1; visPix(nr); running=0; } else { nr=1; visPix(nr); } } function visPix(nr) { document.images.pix.src = images[nr].src; skjulAlle(); document.getElementById('pixtext' + nr).style. --> display="block"; }
next()
, der skal
vise det næste billede, viser billedet efter
samme princip som på foregående side – altså en
"rollover"-funktion. Desuden udløser
funktionen visningen af en billedtekst. Funktionen
skal også sørge for at vende tilbage til billede nr. 1
når det sidste billede er vist. Det foregår ved at
sætte den variable nr til 1, hvis resultatet af
nr + 1
er lig med 7 (antal + 1
).
prev()
, der
viser det foregående billede. Det foregår efter samme
princip som next()
-funktionen.skjulAlle()
-funktionen har til formål at
skjule alle billeder, før noget billede kan vises.autovis()
udløser med 2 sekunders
mellemrum funktionen next()
i det uendelige
eller indtil stop()
-funktionen udløses.
setTimeout()
-funkionen skal have en ID, således
at vi kan referere til funktionen når vi skal bruge
clearTimeout()
. Sålænge applikationen er
i automodus er den variable running sat til
true.stop()
-funktion, der
stopper showet, hvis det faktisk kører (running == 1
),
viser billede nr 1 og sætte den variable running til
false. Hvis showet er i manuel modus udløser et
klik på Stop, at showet vender tilbage til billede nr 1.Sidstnævnte udførelse – det vil sige med et panel, hvor brugeren kan vælge at vise et vilkårligt billede – vises på næste side, hvor jeg desuden også viser, hvorledes du kan indrette applikationen således, at brugeren kan indstille den hastighed, hvormed billederne vises.
Denne side er senest opdateret: 21. June, 2006