Switching Images With Arrows in JavaScript

HTML:

We have a default image and switcher buttons. Switcher button should switch those images.

Source code viewer
<img src="default_image.png" alt="This image is going to be switched" name="SwitchingImage" />
 
<a href="javascript:NextImage()" style="float:right">Next Image</a>
<a href="javascript:PreviousImage()">Previous Image</a>
Programming Language: HTML

JavaScript - No Looping:

This switcher doesn't loop when it reaches to the end.

Source code viewer
// -1 because array members start from 0.
var NumberOfImages = 5 - 1;
 
var img = new Array(NumberOfImages);
 
img[0] = "image.png";
img[1] = "image2.png";
img[2] = "image3.png";
img[3] = "image4.png";
img[4] = "image5.png";
 
// Array key of current image.
var imgNumber = 0;
 
function NextImage() {
  // Stop moving forward when we are out of images.
  if (imgNumber < NumberOfImages) {
    imgNumber++;
    document.images["SwitchingImage"].src = img[imgNumber];
  }
}
 
function PreviousImage() {
  // Stop moving backward when we are out of images.
  if (imgNumber != 0) {
    imgNumber--;
    document.images["SwitchingImage"].src = img[imgNumber];
  }
}
Programming Language: Javascript

JavaScript - Using Images For Buttons:

This doesn't loop either, but uses image buttons. You can easily switch those images, when one end is reached. So you can make the disabled look for the image. The upper part stays the same, so no point to display it twice.

Source code viewer
...
 
function NextImage() {
  if (imgNumber < NumberOfImages) {
    if (imgNumber == 0) {
      document.images["previous_image_name_attribute"].src = "dir/to/colored_previous_image.png";
    }
    imgNumber++;
    if (imgNumber == NumberOfImages) {
      document.images["next_image_name_attribute"].src = "dir/to/grey_next_image.png";
    }
    document.images["SwitchingImage"].src = img[imgNumber];
  }
}
 
function PreviousImage() {
  if (imgNumber != 0) {
    if (imgNumber == NumberOfImages) {
      document.images["next_image_name_attribute"].src = "dir/to/colored_next_image.png";
    }
    imgNumber--;
    if (imgNumber == 0) {
      document.images["previous_image_name_attribute"].src = "dir/to/grey_previous_image.png";
    }
    document.images["SwitchingImage"].src = img[imgNumber];
  }
}
Programming Language: Javascript