JavaScript slidehows

For nogle år siden oplevede jeg en stor interesse blandt nogle kursister for at lave slideshows, som jeg kalder det for, altså en løbende fremvisning af billeder på en webside.

Jeg lavede så nogle undervisningsnotater om sagen, som jeg siden omsatte til websider.

Da jeg for nylig kiggede på disse sider igen, kunne jeg godt se, at de trængte noget til en opdatering. Det er den, du finder her.

Der er (mindst) to forskellige metoder til at lave billedvisning på en webside:

  1. Metode 1, der baserer sig på samme princip som den almindelige grafiske JavaScript rollover (JavaScript Rollovers), nemlig manipulation med img-markørens src-attribut.
  2. Metode 2, der baserer sig på, at alle billederne indlæses på siden, gives samme position, men skjules indtil der er brug for at vise dem. Dette kan ordnes med noget dynamisk HTML, for eksempel gennem manipulation med z-index-attributten eller gennem ændring af billedernes display- eller visibility-egenskab.

Alle mine eksempler benytter sig af metode 1. For så vidt angår metode 2 har jeg for nylig lavet et morsomt lille eksempel på websiden Ændring af z-index-værdier. Her er ganske vist ikke tale om billeder, men blot nogle kulørte rektangeler, men princippet kan sagtens gennemføres med nogle billeder i stedet for.

Periodisk visning

Den simpleste form for slideshow baserer sig på anvendelsen af JavaScript-funktion setTimeout([funktion],[tid]), der udløser funktion efter et vist tidsforløb tid, der skal angives i milisekunder.

Jeg har lavet fire eksempler på dette, som du kan studere ved at benytte linksene i højre side.

Den kode, der hører til de enkelte eksempler, er forklaret på eksempelsiden.

Tidslinie – Timeline

Der findes forskellige metoder til at kontrollere tidsforløbet i et sådant online billedvisningsprogram. Én af disse gennemgår jeg i en længere artikel med 4-5 eksempler:
JavaScript tidsline.

Mekanikken bag selve visningen af billederne er den samme som i de allerede beskrevne eksempler. Det, der adskiller tidslinie-scriptet fra disse er den fuldstændige kontrol over de tidsforløb, der indgår i et show, samt muligheden for at vise flere billeder parallelt i samme show, i forskellig takt.

Denne side er senest opdateret: 26. November, 2006