[IMAGE] IU SLIS logo

Demo page logo

Javascript

Here's a slide show.

First image in slide show

<-- This way
That way -->

When you scroll down to look at the images that make up the slide show, you can see that the size of the display is equal to the size of the smallest image in the array.

Here is the script that makes it work

The script is in two parts. The first part is in the <head> of the document. The second part is in the <body>

The script provides the browser with instructions that allow it to pre-load the images, order the rotation, and set the timing is in the <head> of the document.

<script language=javascript type="text/javascript">
<!-- Hide script from old browsers

myPix = new Array("cats.jpg",

"../Images/beer_babies.jpg",
"../Images/peace.jpg",
"../Images/moo.jpg",
"../Images/smile.jpg",
"../Images/dog.jpg")
thisPic = 0
imgCt = myPix.length - 1

function chgSlide(direction) {

if (document.images) {
thisPic = thisPic + direction
if (thisPic > imgCt) {
thisPic = 0
} if (thisPic < 0) {
thisPic = imgCt
}
document.myPicture.src=myPix[thisPic]
}
}

//End hiding script from old browsers -->
</script>

Here's what appears in the <body> of the document:

<img src="../Images/cats.jpg" name="myPicture" width="262" height="262" alt="First image in slide show">
<a href="javascript:chgSlide(-1)"><-- This way</a>
<a href="javascript:chgSlide(1)">That way --></a>

Here are the images

1st image
2nd image
3rd image
4th image
5th image
6th image

Return to Javascript for home use.

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu http://www.slis.indiana.edu/hrosenba/www/Demo/slides.html