Як зробити галерею для сайту на javascript (проста) - код і демо приклад, пошукове просування і

Перш за все, трохи розповім про галерею, а потім приведу код і трохи розповім про нього.

особливості галереї

Перше. зображення можна "клацати" кліками миші на відповідні кнопки (Back і Next).

Друге. Картинки можна перегортати на стрілочки.

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

Четверте. Якщо ми "Дійшли" до останньої в галереї картинки, то стрілочка - "Далі" зникає, те ж саме і зі стрілкою - "Назад".

П'яте. Для зміни галереї (додавання нових картинок або навпаки - витяг непотрібних) досить додати в масив новий елемент - посилання на зображення.

Давайте розглянемо і розберемося в коді ..

imageArray - масив, в якому міститися посилання на зображення. Щоб додати, прибрати, змінити порядок і так далі і тому подібне, досить змінити цей масив і все! Більше міняти нічого не потрібно.

number - змінна, яка відповідає за номер поточної картинки.

image (num) - дана функція приймає числовий параметр, і відповідає за перегортання картинок (вліво, вправо), тобто:

image (1) - показати наступну картинку за рахунок инкрементирования (збільшення на одиницю) змінної number

Якщо передати будь-який інший параметр, відмінний від 1, то здасться попередня картинка.

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

btn_noshow - це функція припиняє показ картинок і викликається подією onMouseOut, коли ми прибираємо миша із зони картинок.

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

Приклад роботи галереї

Ось так виглядає галерея в роботі ..

На цьому все, бажаю удачі і всього найкращого!