I find that tutorial very confusing as well. Here is a very easily customizable image slideshow.
Put this in your <head> script
Code:
<script type="text/javascript">
// <![CDATA[
var interval = 1; // Change this interval depending on how long you want in between images
var current = 0;
var pick = 0;
if (document.images) { // Preload Images to use for the slideshow
var slides = new Array(); // Just add a new slide and the assosiated link to it
slides[0] = new Image() // To customize your images... Doesnt matter how many
slides[0].src = "images1.gif"; // just as long as it has a minimum of 2
slides[1] = new Image()
slides[1].src = "images2.gif";
slides[2] = new Image()
slides[2].src = "images3.gif";
slides[3] = new Image()
slides[3].src = "images4.gif";
slides[4] = new Image()
slides[4].src = "images5.gif";
slides[5] = new Image()
slides[5].src = "images6.gif";
slides[6] = new Image()
slides[6].src = "images7.gif";
slides[7] = new Image()
slides[7].src = "images8.gif";
}
function next() { // Tells the computer what image is going to be next in the slideshow
if(document.images && document.slideshow.complete) {
if(current == slides.length) {
current = 0;
}
document.slideshow.src = slides[current].src;
current++;
}
}
function show() { // Starts a default slideshow with interval of 1 second
slideShow = setInterval("next()", interval*1000);
}
// ]]>
</script>
Put this in your <body> tag where you want your slideshow to appear
Code:
<form action="#">
<img src="images/images1.gif" id="slideshow" height="200" width="200" alt="slideshow" />
<br />
<input type="button" value="Start Show" onclick="show()" />
<input type="button" value="Stop Show" onclick="clearInterval(slideShow);'" />
</form>
where images/images1.gif is the link for the image you want displayed first and dont forget to change the height and width of your image to fit the correct specifications. the start show and stop show buttons are added in as something i thought you might want to use.
Hope this helps.
Bookmarks