Html Help. turn an animation into a slide show

[freezetyle]

Alright, i know from surfing these boards we have ALOT for computer people. and for that group of people coding can be fun!

I am a total newb at html and need some of you L33t H4x0r's to help me out with a project.

SO we are learning about doing loops to create slide shows. we were given an example of an animations as seen here Homer animation

and we were asked too use the base of that code and turn it into a slide show with our own photos and a little bit of text underneath to explain the picture.

They told us to make changes to the function "initImages" and "Function animate"

from what i have seen by looking on webpages i need to have something like this

<p><script LANGUAGE="JavaScript"><!-- HIDE

var num=1
img1 = new Image ()
img1.src = "pic1.jpg"
img2 = new Image ()
img2.src = "pic2.jpg"
img3 = new Image ()
img3.src = "pic3.jpg"
img4 = new Image ()
img4.src = "pic4.jpg" 
img5 = new Image ()
img5.src = "pic5.jpg

text1 = "Seoul, South Korea"
text2 = "Koh Phi Phi, Thailand"
text3 = "Koh Tao, Thailand"
text4 = "Sukhothai, Thailand"
text5 = "Ankor Wat skyline, Cambodia"

var step=1
function slideit(){

if (!document.images)
return
document.images.slide.src=eval("pic"+step+".jpg")
if (step<5)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()

 var counter = 0
 var timer
 var imgs = new Array()
 var activitymonitor=0






function runit() {
	if (activitymonitor==0){
		activitymonitor=1
		initImages()
		animate()
		}
}


function stopit() {
	clearTimeout(timer)
	activitymonitor=0
}


// STOP HIDING --></script></p>

<CENTER>
<form NAME="looper">
  <p><img SRC="pic1.JPG" ALIGN="bottom" name="slide"><br>
  <input TYPE="button" NAME="Button" VALUE=" Stop " onclick="stopit()"> <input
  TYPE="button" NAME="Button" VALUE=" Begin your Adventure " onclick="runit()"> </p>
</form>

i can't really see where i have gone wrong. maybe the order of events? or did i forget to change an element? suggestions?