|
The functions setTimeout() and setInterval()
appear to be very similar.
The setTimeout() function delays for a specified time
period and then triggers execution of a specified function.
Once the function is triggered the setTimeout() has finished.
You can terminate the execution of the setTimeout() before it
triggers an action by using the clearTimeout() function.
But that is just about it.
The setInterval() function also delays for a specified time before
triggering the execution of an action. Where it differs is, that
after triggering an action the command doesn't complete - it just
waits for the specified time again and then triggers the function again and again.
It continues to repeat this process of triggering the function at the
specified intervals until either the web page is unloaded or the clearInterval()
function is called.
The setInterval() function is used for many slideshow presentations.
It will execute a simple function at a set interval as long as the window
state is active.
|
|
|
To add controlls to the slide show you need change the model.
- You still need a function with an array of images,
Depending on what button the use selects, you need to adjust the script
- Now you need to test for three things:
(1) auto run, (2) previous image event, or () next image events (buttons)
- The setInterval()timer needs to be run from inside the function.
See the code below:
<![CDATA[
// image slideshow
// set up global variables
var ImgNum = 0; // incrementor
var delay = 2000; //Time delay between Slides in milliseconds
var toggle = false; // toggle back and forth for Auto run
var run; // variable to hold/run the setInterval() object;
// direction is paramater from previous/next button
function chgImg(direction) {
// set up list of images
images = new Array()
images[0] = '../images/MMPI01_m.jpg'
images[1] = '../images/MMPI02_m.jpg'
images[2] = '../images/MMPI03_m.jpg'
images[3] = '../images/MMPI04_m.jpg'
images[4] = '../images/Dragon01_n.jpg'
images[5] = '../images/Dragon02_m.jpg'
images[6] = '../images/Hush01_m.jpg'
images[7] = '../images/Hush02_m.jpg'
images[8] = '../images/Hush03_m.jpg'
images[9] = '../images/Hush04_m.jpg'
var ImgLength = images.length - 1; //adjust length for 0-based array
//if (document.images) {
ImgNum = ImgNum + direction; // increment by direction
if (ImgNum > ImgLength) { // reset incrementor if at end
ImgNum = 0;
}
if (ImgNum < 0) { // reset incrementor if at beginning
ImgNum = ImgLength;
}
document.image1.src = images[ImgNum]; // load image to html tag
// }
}
function slideShow() {
if (toggle == true) {
toggle = false; // if toggle is true set to false and clear
window.clearInterval(run);
}
else
if (toggle == false) {
toggle = true; // if toggle is false set to true and run auto
run = setInterval("chgImg(1)", delay);
}
}
]]>
You need to adjust the HTML to display the images. Now you need to
add the buttons (links) to execute the slideshow. You can still include an
on load event to trigger the slideshow function.
<![CDATA[
. . .
<body onLoad="javascript:slideShow();">
. . .
<form name="imageForm">
<a href="javascript:chgImg(-1)">Previous</a>
<a href="javascript:slideShow()">Auto/Stop</a>
<a href="javascript:chgImg(1)">Next</a>
<br><img src="../images/MMPI01_m.jpg" name="image1"
style="position:relative; float:right; margin:10px;">
</form>
. . .
]]>
|