Vis et tilfældigt billede

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.

Ad rotator

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