Вы здесь
Главная > Мой блог > WEB-разработка > Галерея для сайта на javascript

Галерея для сайта на javascript

Особенности галереи

Первое: изображения можно “перещелкивать” кликами мыши на соответствующие кнопки (Back и Next).

Второе: Картинки можно перелистывать на стрелочки.

Третье: Стрелочки появляются только при наведении на изображение.

Четвертое: Если мы “Дошли” до последней в галерее картинки, то стрелочка – “Далее” исчезает, тоже самое и со стрелкой – “Назад”.

Пятое: Для изменения галереи (добавление новых картинок либо наоборот – извлечение ненужных) достаточно добавить в массив новый элемент – ссылку на изображение.

JavaScript код галереи

Давайте рассмотрим и разберемся в коде..

 

imageArray – массив, в котором содержаться ссылки на изображения. Чтобы добавить, убрать, изменить порядок и так далее и тому подобное, достаточно изменить этот массив и все! Больше менять ничего не требуется.

number – переменная, которая отвечает за номер текущей картинки.

image(num) – данная функция принимает числовой параметр, и отвечает за перелистывание картинок (влево, вправо), то есть:

image(1) – показать следующую картинку за счет инкрементирования (увеличения на единицу) переменной number

Если передать любой другой параметр, отличный от 1, то покажется предыдущая картинка.

btn_show – функция, которая показывает стрелочки при наведении на изображения – событие onMouseOver.

btn_noshow – это функция прекращает показ картинок и вызывается событием onMouseOut, когда мы убираем мышь из зоны картинок.

Также, в двух (2) вышесказанных функциях, перед показом стрелок, проверяется номер текущей картинки, для того, чтобы не показывать Стрелку Влево, если это первая картинка и не показывать Стрелку Вправо, если это последняя картинка, принцип, думаю, понятен.

В принципе, сложностей в использовании данной галереи возникнуть не должно, в коде я привел комментарии и вы с легкостью сможете изменить количество, порядок, оставить только вариант перелистывания с помощью кнопок или с помощью только стрелок, размеры изображения и т.д. и т.р.

Пример работы галереи

Вот так выглядит галерея в работе..

Demo галерея

Скачать пример

На этом все, желаю удачи и всего наилучшего!
Источник: http://sergey-oganesyan.ru/

Добавить комментарий

Top