Slideshow med brugerkontrol

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:

  1. Mulighed for autovisning, det vil sige, at showet skal kunne startes og køre videre ind til det stoppes.
  2. Mulighed for sekventiel visning af hvert enkelt billede for sig.
Billede nr. 1
Billede nr. 2
Billede nr. 3
Billede nr. 4
Billede nr. 5
Billede nr. 6

Html-koden

<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;}

Kontrolpanel

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.

Script

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";
}

Bemærkninger

  1. Scriptets første 3 linier sætter nogle globale variable:
    1. Antallet af billeder i showet
    2. Den variable nr, der afspejler det aktuelle billede, sættes til 1
    3. Den variable running bruger vi til at holde styr på, om showet er i automodus.
  2. Dernæst preloader vi de 6 billeder, der indgår i showet. Om denne preload, se websiden Autofyldning af Arrays.
  3. Nøglefunktionen er 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).
  4. Vi har også en funktion, prev(), der viser det foregående billede. Det foregår efter samme princip som next()-funktionen.
  5. skjulAlle()-funktionen har til formål at skjule alle billeder, før noget billede kan vises.
  6. Funktionen 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.
  7. Så har vi vore 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.
  8. Og endelig har vi en visPix()-funktion for de tilfælde, hvor vi har brug for at vise et tilfældigt billede. Denne funktion har vi ikke vældig meget brug for i denne applikation, men hvis vi ønskede et panel med tal eller billedtekster, der gør det muligt for brugeren at vælge et tilfældigt billede, er den uundværlig.

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: 20. June, 2006