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 ....

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).

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).

function Nexter(){

if (currentIndx<imagesPreloaded.length-1){

/* the length of our array is 4. But the images go from 0 to 3, so we take one off the count. (We made currentIndx equal 0 right at the beginning of our script!) */

currentIndx=currentIndx+1;

/* To go forward, we add one, providing the number is less than the number of images */

document.theImage.src=imagesPreloaded[currentIndx].src

/* The NAME of the image in our slide show is theImage. We can change the image loaded here as above */

document.form1.text1.value=Messages[currentIndx];

/* The NAME of the form is 'form1', and the name of the text area is 'text1'. We make its value (content) equal the text in the array 'Messages'. So if currentIndx is 0, the text will be 'We learn about our world through the 5 senses' and so on */

}

else {

currentIndx=0

/* Otherwise, we go back to the beginning, if currentIndx is too big */

document.theImage.src=imagesPreloaded[currentIndx].src

document.form1.text1.value=Messages[currentIndx];

}

/* The function Baccker() is similar to the previous function, so it contains no comments */

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];

}}

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 automaticly() {

if (document.form1.automatic.checked) {

if (currentIndx<imagesPreloaded.length){

currentIndx=currentIndx+1;

}

else {

currentIndx=0

}

/* I have put this code at the end, so it follows on naturally after the value of currentIndx is determined */

document.theImage.src=imagesPreloaded[currentIndx].src

document.form1.text1.value=Messages[currentIndx];

/* The only special bit of script is this line, which sets the timer value to 5 seconds, or 5000 milliseconds. */

var delay = setTimeout("automaticly()",5000)

}

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

We activate the timer with:

Thus we call the function '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. */

<td><input type="button" value="Next >>" name="next" onClick="Nexter()"></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.

The jsEditor cannot replace the tutorial, nor the the tutorial, jsEditor. They complement each other. Because the jsEditor contains a knowledge base of more than 150 items with code examples, you can use it to find other items that work with both major browsers. You can order the jsEditor online and download the full version immediately, so in a few minutes you could be using it to help you learn and develop scripts.

Next: New Image Every Time You Visit the Page (Nearly)Ken Ward's HTML Guide...

And for some programming for your brain: check out New Life Course