Slideshow med variabel hastighed

Den funktionalitet, jeg har tilføjet i dette eksempel, er:

  1. Mulighed for at ændre hastigheden, hvormed billederne vises.
  2. Brugeren kan vælge at vise et vilkårligt billede.
Billede nr. 1
Billede nr. 2
Billede nr. 3
Billede nr. 4
Billede nr. 5
Billede nr. 6
Billede nr. 7
Billede nr. 8
Billede nr. 9
Billede nr. 10

Vis billede nr: 1 2 3 4 5 6 7 8 9 10

Scriptet

var speed= 1000;
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/pix" + i + ".jpg";
}
function setSpeed(msek) {
  speed = msek * 2000;
}
function prev() {
  skjulAlle();
  nr=nr-1;
  if (nr==0) nr=antal;
  document.billede.src = images[nr].src;
  document.getElementById('pixtext' + nr).
  --> style.display="block";
}
function next(){
  skjulAlle();
  nr=nr+1
  if (nr==antal + 1) nr=1;
    document.billede.src = images[nr].src
    document.getElementById('pixtext' + nr).
    -->  style.display="block";
}
function skjulAlle(){
  for (i = 1; i < antal + 1; i++) {
    document.getElementById('pixtext' + i).
    -->  style.display="none";
	}
}
function auto(){
  next()
  timer = setTimeout('auto()',speed)
  running=1
}
function stop(){
  if (running == 1){
    clearTimeout(timer)
    running=0;
  }
}
function visPix(nr) {
  stop();
  skjulAlle();
  document.billede.src = images[nr].src;
  document.getElementById('pixtext' + nr).
  -->  style.display="block";
}

Kommentarer

Muligheden for at ændre på den hastighed, hvormed billederne vises, opnår jeg ved at oprette en funktion, setSpeed(), som jeg kalder fra en liste over mulige hastigheder og derfra passerer et tal msek til funktionen. Derved sættes en ny værdi for den variable speed, svarende til det tal, jeg klikkede på.

Herefter passerer jeg speed til setTimeout()-funktionen, der regulerer hastigheden.

visPix()-funktionen er ret ligetil: Først stoppes en eventuel rullende fremvisning; dernæst skjules alle billeder; Og til sidst vises det billede, der er valgt.

Universalfunktion

Jeg vil godt betegne dette som et universalscript til visningen af billeder. Men der kan naturligvis altid pyntes på resultatet. Det gør jeg på de følgende sider, hvor jeg også pusler lidt med:

  1. Autostart når siden indlæses
  2. Visning af aktuel hastighed
  3. Visning af aktuelt billede-nummer
  4. Indlæsning af billedetekster fra et array
  5. Et grafisk kontrolpanel
  6. Brug af overblændingsfilter
  7. At tage højde for, at i "det virkelige liv" er ikke alle billederne lige store.
  8. Desuden kunne jeg også godt tænke mig at brugeren skal have mulighed for at se på showets enkelte billeder i en større version end den, det er praktisk (af hensyn til overførselshastigheden) at anvende i showet.
  9. Endelig kunne jeg godt tænke mig at lave et trick, så en bruger har noget at kigge på, mens billederne indlæses.

Alle disse eksperimenter kan dårligt være på én webside, så der følger yderligere et par sider.

Denne side er senest opdateret: 21. June, 2006