JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype>
<html>
<head>
<title>Array example</title>
</head>
<body>
<img src="http://imaging.nikon.com/lineup/coolpix/style/s6200/img/sample/img_01.jpg" id="targetImage" name="mypic" border="0"/>
<input type="button" value="Next picture" onclick="goForward()"/>
<input type="button" value="Previous picture" onclick="goReverse()"/>
</body>
<script>//Помещаем скрипт в конец страницы. Это позволяет не навешиваться на событие загрузки документа, ведь всё уже загружено до скрипта;
var image = document.getElementById("targetImage"), //Сразу получаем ссылку на обьект каритнки;
imagePath = [
"http://imaging.nikon.com/lineup/coolpix/style/s6200/img/sample/img_01.jpg",
"http://imaging.nikon.com/lineup/coolpix/style/s6200/img/sample/img_02.jpg",
"http://imaging.nikon.com/lineup/coolpix/style/s6200/img/sample/img_03.jpg",
"http://imaging.nikon.com/lineup/coolpix/style/s6200/img/sample/img_04.jpg",
"http://imaging.nikon.com/lineup/coolpix/style/s6200/img/sample/img_05.jpg"
], //Литерально создаём массив. Это намного быстрее и читабельнее, чем использовать конструктор new Array();
currentImage = 0; //Создаём счётчик и сразу обнуляем;
function goForward(){ //Создаём метод перехода на следующее изображение;
currentImage++; //Увеличиваем счётчик;
if(currentImage > imagePath.length - 1){ // Если счётчик больше чем максимальный индекс массива, оставляем максимально допустимое значение;
currentImage = imagePath.length - 1;
}else{ //Если всё нормально, то переключаем картинку
image.src = imagePath[currentImage];
}
}
function goReverse(){
currentImage--; //Уменьшаем счётчик;
if(currentImage < 0){ //Если счётчик меньше 0, выставляем его в ноль (не забываем, что индексы в массиве начинаются таки с 0);
currentImage = 0;
}else{ //Если всё нормально, то переключаем картинку
...