HTML and CSS Reference
In-Depth Information
EXAMPLE
12.10 (
CONTINUED
)
planet[4]=new Image();
planet[4]="/images/Jupiter.jpg";
}
else{
alert("There are no images to preload");
}
}
4
function startSlideShow()
{
5
if(
i < planet.length
){
6
document.images["planet_pic"].src = planet[i]
;
i++;
}
else{
i=0;
7
document.images["planet_pic"].src = planet[i];
}
8
timeout = setTimeout('startSlideShow()',1500);
}
9
function stopSlideShow(){
clearTimeout(timeout);
}
</script>
</head>
<body bgColor="black" onload = "preLoadImages()">
10
<img name="planet_pic" src="Jupiter.bmp"
height="348"
width="545px" />
<form>
<br /><br />
<input type=button value="
Start Show
"
onClick="return startSlideShow();"/>
<input type=button value="
Stop Show
"
onClick="return stopSlideShow();"/>
</form>
</body>
</html>
EXPLANATION
1
A function called
preLoadImages()
is defined in the head of the document. It will
define a list of images that will be loaded before anything else.
2
A new array called,
planets
, will is declared. It will be assigned the images of the
planets.
3
The
Image()
constructor creates and preloads a new
image
object called
planet[0]
.
4
The function called
startSlideShow()
allows the user to determine when to start
the slideshow.
5
The variable
i
is initially set to 0 and is used as an index in the array called
planets
.
As long as the index value is less than the size of the array, the statements in the
if
condition will be executed.
