Особенности галереи
Первое: изображения можно “перещелкивать” кликами мыши на соответствующие кнопки (Back и Next).
Второе: Картинки можно перелистывать на стрелочки.
Третье: Стрелочки появляются только при наведении на изображение.
Четвертое: Если мы “Дошли” до последней в галерее картинки, то стрелочка – “Далее” исчезает, тоже самое и со стрелкой – “Назад”.
Пятое: Для изменения галереи (добавление новых картинок либо наоборот – извлечение ненужных) достаточно добавить в массив новый элемент – ссылку на изображение.
JavaScript код галереи
Давайте рассмотрим и разберемся в коде..
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<script type="text/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", ]; window.number = '0'; //Привязываем количество картинок к размеру массива 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] + '">'); </script> |
imageArray – массив, в котором содержаться ссылки на изображения. Чтобы добавить, убрать, изменить порядок и так далее и тому подобное, достаточно изменить этот массив и все! Больше менять ничего не требуется.
number – переменная, которая отвечает за номер текущей картинки.
image(num) – данная функция принимает числовой параметр, и отвечает за перелистывание картинок (влево, вправо), то есть:
image(1) – показать следующую картинку за счет инкрементирования (увеличения на единицу) переменной number
Если передать любой другой параметр, отличный от 1, то покажется предыдущая картинка.
btn_show – функция, которая показывает стрелочки при наведении на изображения – событие onMouseOver.
btn_noshow – это функция прекращает показ картинок и вызывается событием onMouseOut, когда мы убираем мышь из зоны картинок.
Также, в двух (2) вышесказанных функциях, перед показом стрелок, проверяется номер текущей картинки, для того, чтобы не показывать Стрелку Влево, если это первая картинка и не показывать Стрелку Вправо, если это последняя картинка, принцип, думаю, понятен.
В принципе, сложностей в использовании данной галереи возникнуть не должно, в коде я привел комментарии и вы с легкостью сможете изменить количество, порядок, оставить только вариант перелистывания с помощью кнопок или с помощью только стрелок, размеры изображения и т.д. и т.р.
Пример работы галереи
Вот так выглядит галерея в работе..
Источник: http://sergey-oganesyan.ru/