"Dé grootste en gratis computerhelpdesk van Nederland"
slideshow automatisch afspelen
- Onderwerp starter luuk2512
- Startdatum
- Status
JeroenE
Terugkerende gebruiker
- Lid geworden
- 20 mrt 2005
- Berichten
- 1.950
Hier is de code voor je slideshow.
Deze is getest in vier browsers en werkt in alle vier: Internet Explorer, Firefox, Safari en Google Chrome.
Alle foto's moeten dezelfde naam hebben, met uitzondering van het nummer: kerstmis001.jpg kerstmis002.jpg ...
Begin de nummering met 001
zet alle foto's in de map images, gelijk tot welk thema ze behoren. De naam van de foto's zorgen voor het onderscheid.
Uitleg over waar je de naam van de foto's moet veranderen en het aantal aangeven, staat in het script zelf achter de dubbele slash (//)
Deze is getest in vier browsers en werkt in alle vier: Internet Explorer, Firefox, Safari en Google Chrome.
HTML:
<html>
<head>
<title>Slideshow</title>
<script language="javascript" type="text/javascript">
<!--
var spn = "naam"; // naam verander je door de naam van de afbeeldingen ZONDER cijfers en .jpg, dus als je bestand kerstmis001.jpg is, wordt het kerstmis
var npa = 0; // de nul verander je door het aantal afbeeldingen
var slideshow;
var apa = Array("");
function setdigits(nn) {
return ((nn < 10) ? "00" + nn : (nn < 100) ? "0" + nn : nn);
};
for (var ni = 1; ni <= npa; ni++) {
apa[ni] = spn + setdigits(ni) + ".jpg";
};
var ncp = 1;
function slideforward() {
ncp = (ncp == npa) ? 1 : ncp + 1;
document.images.picture.src = "images/" + apa[ncp];
};
function slidebackward() {
ncp = (ncp == 1) ? npa : ncp - 1;
document.images.picture.src = "images/" + apa[ncp];
};
function startshow() {
slideshow = setInterval("slideforward();", 500);
document.btns.startbtn.style.display = "none";
document.btns.stopbtn.style.display = "block";
};
function stopshow() {
clearInterval(slideshow);
document.btns.stopbtn.style.display = "none";
document.btns.startbtn.style.display = "block";
};
-->
</script>
</head>
<body>
<table height="100%" width="100%">
<tr valign="middle"><td align="center" colspan="3">
<script language="javascript" type="text/javascript">
<!--
document.write("<img name='picture' src='images/" + apa[1] + "' height='600'>");
-->
</script>
</td></tr>
<form name="btns">
<tr valign="middle"><td align="right" width="48%">
<input type="button" name="backwardbtn" onmousedown="javascript:slidebackward();" value="Previous" />
</td><td align="center">
<input type="button" name="startbtn" onmousedown="javascript:startshow();" value="Start" />
<input type="button" name="stopbtn" onmousedown="javascript:stopshow();" value="Stop" style="display: none" />
</td><td width="48%">
<input type="button" name="forwardbtn" onmousedown="javascript:slideforward();" value="Next" />
</td></tr>
<form>
</table>
</body>
</html>Alle foto's moeten dezelfde naam hebben, met uitzondering van het nummer: kerstmis001.jpg kerstmis002.jpg ...
Begin de nummering met 001
zet alle foto's in de map images, gelijk tot welk thema ze behoren. De naam van de foto's zorgen voor het onderscheid.
Uitleg over waar je de naam van de foto's moet veranderen en het aantal aangeven, staat in het script zelf achter de dubbele slash (//)
- Status
