OK, een webpagina heeft een head en een body.
<head>
Hier staat code
</head>
<body>
Hier staat code
</body>
Om te beginnen zorg je dat dit in de body staat.
Op de plaats waar 1.jpg staat, is bij mij de eerste afbeelding.
Natuurlijk kan deze bij jou een andere naam hebben.
Dus dit moet je even aanpassen.
HTML:
<body onload="runSlideShow()">
<img src="1.jpg" name='SlideShow'>
</body>
Nu het gedeelte tussen de head.
HTML:
<head>
<script>
// =======================================
// Hieronder mag je waarden aanpassen
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
// Duration of crossfade (seconds)
var crossFadeDuration = 6
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
// ============================================
// Verander hier onder niets
// ============================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>
Ik heb wat aanwijzingen in de code geplaatst.
Je kunt wat aanpassingen doen in het bovenste gedeelte van het script.
var slideShowSpeed = 5000 Als je hier 1000 van maakt, volgen de afbeeldingen sneller.
var crossFadeDuration = 6 Hiermee stel je de fade in en uit van de afbeeldingen in. Maak er maar eens 2 van.
Probeer eens met verschillende waarde wat jij mooi vind.
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Hier staan mijn afbeeldingen 1.jpg tot en met 4.jpg Maar natuurlijk zullen dit bij jouw andere namen zijn. Pas dit dus aan.
Ik heb een slideshow voor 4 afbeeldingen, maar dit mogen er natuurlijk meer zijn.
Dan moet je dit dus aanvullen met
Pic[4] = 'afbeelding.jpg'
Pic[5] = 'afbeelding.jpg'
Pic[6] = 'nog een afbeelding.jpg'
Kijk wel uit met te veel afbeeldingen dat de laadtijd van de pagina niet te groot wordt.
Ik weet zeker dat jou dit gaat lukken, ik voeg mijn slideshow toe als bijlage.
Als er problemen zijn moet je wachten tot de eerste week van september, omdat ik weg ben.
