Image Slider in Javascript

Question

This image slider won't show the next pic. I have 3 images .. image1, image2 and image3 but it only stays on image1..

<script type="text/javascript">
var image1 = new Image();
image1.src="jokes.png";
var image2 = new Image();
image2.src="facts.png";
var image3 = new Image();
image3.src="csharp.png";
</script>



<img src="jokes.png" name="slide" width="200" height="200">
<script type="text/javascript">
var step = 1;

function slideit() {
    document.images.slide.src = eval("image" + step + ".src");
    if (step < 3) {
        step++;
        else step = 1
        setTimeout("slideit()", 2500);
    }
    slideit()
}
</script>

Answer 1

Because your function slideIt is never called. The first call is included inside the function...

Try this

<script type="text/javascript">
var step = 1;

function slideit() {
    document.images.slide.src = eval("image" + step + ".src");

    if (step < 3)
        step++;
    else 
        step = 1

    setTimeout("slideit()", 2500);
}

//First call
slideit();
</script>

Answer 2

Apart from sdespont's answer there is a problem with syntax

<script type="text/javascript">
var step = 1;

function slideit() {
    document.images.slide.src = eval("image" + step + ".src");
    if (step < 3){ 
      step++;
    }else{ 
     step = 1;
    }
    setTimeout("slideit()", 2500);

}

//First call
slideit();
</script>