Ken Ward's Java Script Tutorial ...

A slide show with JavaScript

Have a click-around with the previous and next buttons in the slide show below and see what happens. Then click the check box and wait to see what happens then.

When I click on the next or previous buttons, I get a new image and a new text. When I click on the check box to select it, I get a slide show with the images and text changing automatically.

The code here doesn't really introduce anything new. Let's take it one step at a time.

Make an image list

And while we are at it, we also make a list of the text to be shown in the text area ....

currentIndx=0;
MyImages=new Array();

MyImages[0]='vulcano.gif';

MyImages[1]='eye.gif';

MyImages[2]='ear.gif';

MyImages[3]='hand.gif';

Messages=new Array()

Messages[0]='We learn about our world through the 5 senses';

Messages[1]='We use our eyes to see things';

Messages[2]='Our ears to hear things'

Messages[3]='And our sense of touch to feel things.';

We make an array called MyImages to hold the images. And an array called Messages, to hold, surprisingly enough, the text we want in the text area. So now we have told JavaScript what we are going to use.

Preload the images

Images appear much faster when they are preloaded. We do this with the following code:

imagesPreloaded = new Array(4)

for (var i = 0; i < MyImages.length ; i++)

{

imagesPreloaded[i] = new Image(120,120)

imagesPreloaded[i].src=MyImages[i]

}

The virtual image which we preload is called, in this case, imagesPreloaded. It is an array with 4 objects, in this case. With this code we make a virtual image which has the size of our images (120 x 120) and we identify the names by making Preloaded's src equal to the names we hold in the list of images (MyImages).

Write Image Numbers

In the example above, the image numbers, for example 1 of 4, etc, are written by this function. You need to put a span with this id in your page!

/*###### function to write image number in sequence, eg 1 of 4*/
function writeImageNumber()
{
oSpan=document.getElementById("sp1");
oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length;

}

Back and forward functions

If we want to move forward, we add one to the index of the objects - images or text - in their respective arrays. But if the number is larger than the number of objects, we make the function go back to 0 (the number for the first object in the array).

/* ####################### we create the functions to go forward and go back ####################### */
function Nexter(){
if (currentIndx<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
writeImageNumber();
}
function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
else {
currentIndx=3
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
writeImageNumber();
}

Actually, in the above code, it isn't necessary to write document.theImage.src ... etc everytime - we could have put this at the end as we will do with the next function.

Doing it automatically

This code changes the images and text after a certain interval. Notice how the code to decide which is the next image to load is similar to that for Nexter(), but this time we put all the document.theImage ... at the end, after determining what the next number will be.

function automatically() {
if (document.form1.automatic.checked) {
if (currentIndx<imagesPreloaded.length){
currentIndx=currentIndx
}
else {
currentIndx=0
}
writeImageNumber()
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
currentIndx=currentIndx+1;
var delay = setTimeout("automatically()",3500)
}
}

Dealing with Refresh

The following function keeps the images and text in accord when the user presses the refresh button:

/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.form1.text1.value=Messages[0];
writeImageNumber();
}

This is the end of the script in the HEAD of the page.

Body Code

We activate the timer and the refresh with:

Thus we call the functions 'setCurrentIndex()' and 'automatically()' when we load the page.

Finally we put this in the body of the document to get the form, buttons, etc -

<tr>

/* The text area below has the initial value (same as Messages[0]). Later it changed by code*/

<td><textarea rows="4" name="text1" cols="20" wrap="virtual">We learn about our world through our 5 senses.</textarea></td>

</tr>

<tr>

/* The following 2 buttons call the functions Backer() and Nexter(), explained above. */

/* Don't forget the span, where the function writes the current image number!.(You can put this where you like) */

<td><input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span></td>

</tr>

<tr>

<td><div align="right"><p>Automatic:</td>

/* Finally, the check box calls the function 'automatically()' when it is clicked. */

</tr>

</table>

</form>

The slide show uses basic code which you might wish to improve upon and utilise for your own slide shows or other image projects.

Next: New Image Every Time You Visit the Page (Nearly)

Also: Learn how to use Reverse Image Search, an innovative technology: reverseimagesearch.us