Javascript Slideshow with buttons

Question

I'm trying to figure out how to create a 'previous image' button for my javascript slideshow. Here is the code I have so far..

<img id="slide" height="300" width="300" src="images/1.jpg">
<br />
<button id="previous">Previous Slide</button>
<button id="next" >Next Slide</button>

var i = 1;
var images = [];

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";

var nextImage = function () {
    document.getElementById("slide").src = images[i];   

    if (i < images.length -  1) {
        i++;    
    }
    else {
        i=0;    
    }
}

var previousImage = function () {
    document.getElementById("slide").src = images[i];
}


document.getElementById("next").addEventListener("click", nextImage);
document.getElementById("previous").addEventListener("click", previousImage);

As you can see i'm clueless as to what to do with my previousImage function to make this work. Any thoughts?

Answer 1

Try this:

var i = 0;
var images = [];

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";

var nextImage = function () {

    if (i < images.length) {
            i++;      
    }
    else {
        i=0;    
    }
    document.getElementById("slide").src = images[i];   

}

var previousImage = function () {
    if (i > 0)
      i--;      
    }
    else {
        i=images.length-1;
    }
    document.getElementById("slide").src = images[i];
}