Implementing a Slideshow in HTML using Javascript

Question

I'm trying to create a slideshow of images I have using an external javascript (to make my html code cleaner). I know the code works as its not mine, but I modified it to work with mine. I set my img tag and the script exactly the way it was designed for, but when I display the webpage, the images never changes, it stuck at the first image. I'm not sure why this is happening as this is the first time I'm using javascript in html.

HTML(body only):

<div style="padding: 10px;"> 
                <script src="slideshow.js"></script>
                <img src="image/slideshow/banner1.jpg" id="slide" class="body" alt="" />
            </div>

slideshow.js:

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "image/slideshow/banner1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "image/slideshow/banner2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "image/slideshow/banner3.jpg"


var step=0

function slideit(){
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<2)
  step++
 else
  step=0
 setTimeout("slideit()",2500)
}

slideit()

I got the code from here: http://www.javascriptkit.com/howto/show2.shtml I dont know if that will help or not.

Answer 1

Place your slideshow.js AFTER jQuery.js on your html page.

<script>jquery.js file</script>
<script>slideshow.js file</script>

If it already is or it's not jQuery dependent, then kindly send a jsfiddle with all your codes please