Как работает код этого слайдера?

Question

[Super Star]

В общем взялся я за javascript, но мне нужны советы по коду так как я не могу понять что и откуда берётся. Автор частично объясняет что для чего но некоторые моменты мне не ясны. Вот рабочий вариант sergey-oganesyan.ru/examples/gallery.html + сам туториал sergey-oganesyan.ru/javascript-s-primerami/galerey...

var imageArray В данном массиве хранятся 10(от 0-9) картинок которые потом попадают в слайдер

function image(num) внизу слайдера есть кнопки из которых в функцию image(num) передаётся 0 или 1
/*только мне неясно if(num == 1) он всегда будет равен 1-це или он как-то наращивается?*/

var imageCount = imageArray.length; в этой переменной храниться количество элементов в массиве
if(number < imageCount-1) Если текущий номер картинки меньше чем количество элементов массива - 1 то...

/*imageCount-1 я вот не понимаю почему именно так. количество элементов массива минус 1. Там же от 0 до 9. О_о не понимаю. Япробовал убивать это -1 и делать +1 но тогда последняя картинка не показывается но в целом я не догоняю что к чему*/

/*почему number++; стоит после if(number < imageCount-1). почему не после этого if(num == 1)? */

Дальше мне всё понятно =) Спасибо за внимание =)

<div onMouseOver="btn_show()" onMouseOut="btn_noshow()" class="wrapper">

<code lang="javascript">
	                       
				var imageArray = [
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/1.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/2.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/3.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/4.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/5.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/6.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/7.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/8.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/9.jpg",		
					"http://sergey-oganesyan.ru/wp-content/uploads/2014/01/10.jpg",				
				];
				
				var number = '0'; 

						<b>/*в этой переменной храниться количество элементов в массиве*/	</b>
				var imageCount = imageArray.length;
								
				function image(num){
				

					if(num == 1){
					
							//Если это последняя картинка, то не увеличиваем счетчик number
						if(number < imageCount-1){
						
							number++;

							document.getElementById('images').src = imageArray[number];
							document.getElementById('num_img').innerHTML= number + 1 + '/' + imageCount;
						}
					}					 
					else{  //Если выбрана предыдущая картинка
					
								//Если это первая картинка, то не уменьшаем счетчик number
						if(number > 0){
						
							number--;
							document.getElementById('images').src = imageArray[number];
							document.getElementById('num_img').innerHTML= number + 1 + '/' + imageCount;
						}
					}
				}
				
						//Функция для показа стрелочек
				function btn_show(){

					if(number != 0) {
						document.getElementById('left').style.display='block';
}
						
					if(number != imageCount - 1){
						document.getElementById('right').style.display='block';
} 
				}
				
						//Функция, которая прекращает показ стрелочек
				function btn_noshow(){

					document.getElementById('left').style.display='none';
					document.getElementById('right').style.display='none';
				}
					
					//Выводим картинки
				document.write('<img id="images" src="' + imageArray[0] + '">');
</code>
		<!-- Стрелочка влево -->
		<div id="left" onclick="image(0)" class="left_right"><img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/left.png"></div>
					
						<!-- Стрелочка вправо -->
		<div id="right" onclick="image(1)" class="left_right" style="margin-left: 534px; position: absolute; display: none;"><img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/right.png"></div>
			
	</div>

	<center><p style="font-size: 18px;color: #333;font-weight: bold;" id="num_img"></p></center>
	
	<center><span class="myButton" onclick="image(0)">Back</span> <span class="myButton"  onclick="image(1)">Next</span></center>

Answer 1

[GreatRash]

var images = [
  'img_01.jpg',
  'img_02.jpg',
  'img_03.jpg'
];

var totalImages = images.length;

alert(totalImages); // выведет 3

// допустим нам надо взять последний элемент массива
alert(images[totalImages]);
// будет ошибка
// потому что images[3] не существует, ибо массивы считаются от нуля
// 0, 1, 2 - всего три элемента, но последний под индексом 2
// поэтому нам надо написать вот так
alert(images[totalImages - 1]);

number++; стоит после if(number < imageCount-1) потому, что на следующую картинку можно переключиться только тогда, когда следующая картинка в принципе есть, т.е. только в том случае если мы не дошли до конца массива, собственно это и проверяется внутри if.