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:
img
-markørens src
-attribut.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.
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.
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