Bannerannonce rotator

Denne side beskriver en variation over min artikel Slideshow med brugerkontrol. Idéen er at vise en række billeder efter hinanden med korte mellemrum.

Ad rotator

Billedrotator

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.

Princip

Det er den ældste form for dynamisk HTML vi tager i brug her, nemlig muligheden for via JavaScript at manipulere med img-elementets src-attribut.

For at vi kan gøre det skal der være indlæst en billede på siden, en art pladsholder, som vi kan kalde det for:

<div id="pixbox">
  <img src="pix1.jpg" id="pix" alt="Ad rotator" />
  <p> 
  <button id="knap" onclick="rotate();">Stop</button>
  </p>
</div>

Syntaksen for visningen af et andet billede end det, der indlæses ved hjælp af ovennævnte img-markør, er:

document.images.pix.src = images[nr].src;

Venstre side af lighedstegnet matcher et billede i dokumentets array af billeder som har en id pix, netop det indsatte billede. images[] på højre side af lighedstegnet er et array af billeder, der indlæses via følgende preload-kode:

Preload af billederne

var antal=6;
var nr=1;
var running = 0;
var images = new Array();
for(i = 1; i < antal + 1; i++){
  images[i] = new Image();
  images[i].src = "pix" + i + ".jpg";
}

Her sættes variable for
a) antallet af billeder,
b) nr, der er billedets nummer i images-arrayet, og som initieres med værdien 1, og
C) running, der er en variabel, der holder styr på om autovisningen kører eller ikke.

Herefter oprettes array-objekt ved navn images[], dette autofyldes i de følgende linjer med et antal billedobjekter med filnavne pix1.jpg, pix2.jpg, pix3.jpg osv.

Hele denne sag er forklaret yderligere i mine artikler om JavaScript rollovers.

Visningen af billederne

Denne applikation er indrettet så billederne vises i sekventielt, det vil sige i den rækkefølge de er indlæst. En variation, hvor billederne vises i tilfældig orden, finder du på websiden: Visning af billeder i tilfældig orden.

Kernefunktionerne i denne form for billedvisning er:

function next(){
  nr=nr+1;
  if (nr==antal + 1) nr=1;
  document.images.pix.src = images[nr].src;
}
function auto(){
  next();
  timer = setTimeout('auto()',2000);
  running=1;
}

Funktionen next() lægger 1 til den variable nr. Hvis værdien af denne addition overstiger 6 (antal plus 1) sættes den variable til 1 for at starte forfra. Dernæst ændres src-attributten så det billede, der vises i pladsholderen, svarer til værdien af nr.

Funktionen auto() har til formål at blive ved med at udløse next()-funktionen med 2 sekunders forsinkelse for hvert gang. Læg mærke til, at vi i denne funktion sætter værdien af running til 1. Så kører det.

Stop og start

Som nævnt i begyndelsen af artiklen bør en sådan automatisk billedvisning kunne stoppes af læseren. Det sker ved et klik på stopknappen, der herefter ændrer tekst til Kør.

Et klik på stopknappen udløser functionen rotate(), der har følgende udseende:

function rotate() {
  if (running==1) {
    stop();
    var blok=document.getElementById('knap')
    blok.firstChild.nodeValue="Kør";
  }
  else {
    auto();
    var blok=document.getElementById('knap')
    blok.firstChild.nodeValue="Stop";
  }
}

Som du ser tester jeg først for værdien af den variable running. Hvis værdien er 1, betyder det at billedvisningen kører, og derfor skal stoppes, hvilket kser med funktionskaldet stop(). Desuden ændres stopknappens tekstindhold til "Kør".

Hvis derimod running==0 er showet stoppet og funtionen "falder igennem" som de siger, til else-betingelsen. Den starter autovisningen med et funktionskald til auto()-funktionen, der som vi har set sætter running til 1. Nu skiftes indholdet af stopknappen igen til "Stop".

Autoudførelsen stoppes af

function stop(){
  clearTimeout(timer);
  nr=1;
  visPix(nr);
  running=0;
}

Her sætte jeg nr til 1 og running til 0 oh kalder endnu en funktion visPix(nr), der har til formål at rykke tilbage til det første billede, når showet stoppes:

function visPix(nr) {
  document.images.pix.src = images[nr].src;
}

Til allersidst startes hele musikken via onload event-handleren: onload=auto;. Bemærk ingen parenteser her.

Stylesheet formateringen af pladsholderen

Når vi bruger det her beskrevne princip skal alle billederne have samme størrelse. De elementer, der udgør billed-rotatoren, rummes alle i elementet #pixbox:

#pixbox {
height:140px;
position:relative;
}
#pixbox h2 {
color:white;
position:absolute;
right:40px;
top:40px;
}
#pixbox img {
width:100%;
height:100px;
}
#pixbox p {
text-align:center;
margin:0.5em auto;
}

#pixbox-elementet sættes til en højde på 100 pixel plus 40 pixel til stopknappen. position:relative sikrer, at vi kan bruge dette element som referenceramme for teksten oven på billedet. Billedets højde sættes til 100 pixel og bredden til 100 procent af det overordnede element, som i dette tilfælde er #pixbox-elementet. Dette element udfylder hele bredden i artikelspalten.

Det har den effekt at billedet altid vil være 100 pixel højt, men at billedets bredde indretter sig efter bredden af #pixbox og dermed af artikelspalten. Effekten af dette kan du iagttage ved at bruge de to knapper øverst i højre spalte.

Hvis der virkelig var tale om en annonce ville billedet nok have indlejret den fornødne tekst, men her har jeg valgt at indsætte en h2-overskrift, der placeres absolut inde i #pixbox-elementet.

Stopknappen er et button-element. Det er et inline element og skal derfor indlejresi et blokelement. Jeg brug her et p-element og centrerer dette elements indhold.

Denne side er senest opdateret: 24. September, 2008