Slideshow op je website
Dit script heb ik gemaakt voor Mario Wieme. Het idee is om een aantal fotos om de beurt op je pagina te laten zien. Om dit te doen heb een aantal stukjes code nodig. Voor de duidelijkheid wordt er eerst een functie gemaakt om een foto te wisselen. Daarna wordt er een class (SlideShow) gedefinieerd met een initialisatie functie (SlideShow), een afspeel functie (play) en een start/stop functie (start_stop). Van deze class wordt één instantie gemaakt met de naam mySlideShow1.
Plaats de onderstaande code in de <head> sectie van de pagina.
<script language="JavaScript" type="text/javascript">
// wissel het plaatje
function switchImage(imgName, imgSrc)
{
if (document.images)
{
if (imgSrc != "none")
{
document.images[imgName].src = imgSrc;
}
}
}
// geef hier de lijst met alle fotos
var mySlideList1 = ['pict0001.jpg', 'pict0002.jpg', 'pict0003.jpg', 'pict0004.jpg', 'pict0005.jpg'];
// creeer een slideshow instantie
var mySlideShow1 = new SlideShow(mySlideList1, 'slide1', 1000, "mySlideShow1");
// initialisatie functie voor de SlideShow class
// VARS:
// slideList: instantie van de image-lijst
// image: naam van de image (zie <img name="NAAM">
// speed: tijd tussen de fotos in ms
// name: naam van deze instantie
function SlideShow(slideList, image, speed, name)
{
this.slideList = slideList;
this.image = image;
this.speed = speed;
this.name = name;
this.current = 0;
this.timer = 0;
this.running = false;
}
// zet de class functies
SlideShow.prototype.play = SlideShow_play;
SlideShow.prototype.start_stop = SlideShow_start_stop;
// de play functie van de SlideShow class
function SlideShow_play()
{
with(this)
{
if(current++ == slideList.length-1) current = 0;
clearTimeout(timer);
timer = setTimeout(name+'.play()', speed);
running = true;
}
}
// de play functie van de SlideShow class
function SlideShow_start_stop()
{
with(this)
{
if (running == true) {
running = false;
clearTimeout(timer);
}
else {
if(current++ == slideList.length-1) current = 0;
switchImage(image, slideList[current]);
clearTimeout(timer);
timer = setTimeout(name+'.play()', speed);
running = true;
}
}
}
</script>
Nu moet nog een foto op de pagina geplaatst worden waarin de slideshow draait. Hiervoor is het alleen van belang dat deze een naam krijgt die bekend is bij mySlideShow1.
Het resultaat
Hieronder zie het resultaat.
