as4s1n
New Member
- Messages
- 174
- Reaction score
- 4
- Points
- 0
I am working on a slideshow script for my website and for some reason whenever it runs the script works just fine for the first two images I have and then for no reason I can see, prints one extra debug message and stops, not even going to three.
Javascript:
HTML:
Thank you in advance.
Javascript:
Code:
// Variables
var
i = -1,
images = new Array(),
delay,
img,
errors = new Array(),
debug = 1,
imgArrLen;
// Slideshow function
function slideShow() {
if(debug == 1)
document.getElementById("error").style.display = "block";
// Error handler
var error = document.getElementById("error");
// Array length
imgArrLen = images.length,
// EH (1)
errors.push("Get array [images] length");
// Set delay into seconds (predefined on HTML side)
delay = delay*1000;
// EH (2)
errors.push("Turn 'delay' into a seconds variable");
// Get image id
img = document.getElementById("image");
// EH (3)
errors.push("Get the image div");
// Check whether i less than array length
if(i < imgArrLen) {
// EH (4)
errors.push("Add one");
// Add 1 to i
i++;
} else {
// EH (4)
errors.push("Return to 0");
// Reset i to 0 if i is equal to the array length
i=0;
}
// Change the image source
img.src = images[i];
// EH (5)
errors.push("Apply the src change to image to images[i]");
// Start the function again
setTimeout("slideShow('"+image+"')",delay);
// EH (6)
errors.push("Restart the application");
// EH separater
errors.push("------------------------------ ");
// Print EH to page
error.innerHTML += errors.join("p");
}
HTML:
HTML:
<html>
<head>
<script type="text/javascript" language="JavaScript" src="slideShow.js"></script>
<script type="text/javascript" language="JavaScript">
images = ['images/i1.jpg','images/i2.jpg','images/i3.jpg']; // Array of images
delay = 1; // Delay between slides in seconds
</script>
<style type="text/css">
div#error {
height:300px;
overflow:auto;
display:none;
}
</style>
</head>
<body onload="slideShow()">
<img src="i1.jpg" id="image" width="200" height="200" onclick="window.open(this.src)" />
<div id="error"></div>
</body>
</html>
Thank you in advance.
Last edited: