Dit is een zeer simpele slideshow, bedoeld voor thumbnails, die volgens mij leuk kan zijn voor verschillende dingen.
Als je bijvoorbeeld de 20 nieuwste foto's op je website wilt laten zien, dan kun je deze slideshow gebruiken om ze op een compacte manier te tonen. Het voorbeeld is te vinden op http://www.kris.../index.php.
Hoe werkt dit script nu? Wel het bestaat uit 2 onderdelen. Een div-tag met daarin een table-tag. De div-tag doet dienst als frame en het is de table-tag die doorheen dit frame geschoven wordt als een filmstrip met dia's.
De div-tag is als een frame, want hier staat de CSS-eigenschap overflow ingesteld op hidden. Al de inhoud die niet bijkan in de div-tag blijft hierdoor onzichtbaar. Bovendien staat bij de div-tag position ingesteld op relative en bij de table-tag ingesteld op absolute. Ook dit is zeer belangrijk, want in het JavaScript wordt de table-tag absoluut verschoven t.o.v. de div-tag.
Als het script bezig is, wordt er constant de CSS-eigenschap left aangepast van de table-tag, zodanig dat de hele tabel zich verschuift in de div-tag volgens een interval. Als de laatste foto tevoorschijn komt, worden de eerste foto's opnieuw toegevoegd aan de tabel.
Je kunt de snelheid instellen door speed aan te passen (lager is sneller, ik raad 50-100 aan). En let op: slechts 1 rij en minstens 1 cel in diezelfde rij toevoegen!