Denne side beskriver en variation over min artikel Bannerannonce rotator. Idéen er at vise en række billeder efter hinanden med korte mellemrum, i en tilfældig rækkefølge.
Animationer af enhver art kan virke voldsomt distraherende på en læser, så i min optik må man aldrig lave den slags uden at give læseren mulighed for at stoppe animationen, eller som i dette tilfælde udskiftningen af billederne.
Derfor er eksemplet også forsynet med en Stop/Kør-knap.
I forhold til den ovenfor nævnte artikel er der kun sket ganske få ændringer i det JavaScript der styrer billedvisningen.
Der er nogle flere billeder, og der er billeder på såvel højformat som tværformat.
Det nødvendiggør nogle ændringer i HTML-koden og CSS-koden:
<div id="pixbox"> <img src="sport1.jpg" id="pix" alt="Ad rotator" /> </div> <p class="knap"> <button id="knap" onclick="rotate();">Stop</button> </p>
Pladsholderboksen formateres med et absolut minimum af CSS-kode, så det er billederne, der bestemmer boksens vandrette udstrækning, og ikke boksen, der bestememr hvor store billederne skal blive:
#pixbox {text-align:center;height:300px;} .knap {text-align:center;}
I stedet for som i banner-rotatoren at vise billederne sekventielt, der vil sige i den rækkefølge, de er indlæst, udvælges de nu via et tilfældigt tal:
function next(){ nr = randomBetween(1,10); document.images.pix.src = images[nr].src; }
Den variable nr
findes her som et tilfældigt tal mellem 1 og 10, svarende
til det antal positioner, der er i mit imagesshow[]
array. Det kræver så at jeg har
defineret funktionen randomBetween(min,max)
. Den er her:
function randomBetween(min,max) { return min + Math.floor(Math.random() * (max-min +1)); }
For yderligere forklaringer til JavaScript-delen af denne applikation henviser jeg til artiklen Bannerannonce rotator.
Denne side er senest opdateret: 25. September, 2008