Slideshow Help

[stilts]

var mySlideShow = document.getElementById("slideShow");

var imageArray=new Array(); 
imageArray[0]="url(images/Slide1.JPG)";       
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";


var imageIndex = 0;

var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");

mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";


function changeRight  () {

mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;


	if (imageIndex >= imageArray.length) {
	imageIndex = 1;


	
	}
	
	console.log(imageIndex);
	
}


function changeLeft  () {

mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
	
}




rightArrow.onclick = function() {
	
	changeRight();
	
	}
	
leftArrow.onclick = function() {
	
	changeLeft();
	
}

So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work.

Any help would be awesome.

[Logic Ali]

Your 'right' function sets the image using the current value of imageIndex, suggesting that it won't do anything the first time it is used. Also it should set imageIndex to 0 on overflow not 1. The 'left' function makes no attempt to check for underflow. You should change ( and if necessary reset ) the value of imageIndex before setting the image.

[stilts]

In the right function how do I set the current image to suggest that it would be doing something the first time it is used?

How do I check for underflow?

What do you mean by reset the value before setting the image?

Sorry I am new to programming in general so I hope you can bare with me.