Содержание страницы
домикГлавная / Скрипты java и php / Фотогалерея простая на xml для сайта
Простое слайдшоу на xmlВ этом примере, я хочу Вам показать работу простой фотогалереи для сайта на xml, в котором показ слайдов осуществляется так же в автоматическом и ручном режиме с регулируемым временем показа, но без всякой анимации.

Данная фотогалерея состоит из одного java скрипта и xml файла, где в последнем и прописаны все наши картинки, которые по количеству можно добавлять без всяких ограничений. Сразу хочу отметить: показ фотогалереи совсем не возможен в очень старых версиях браузера.

Пример работы - простой фотогалереи на xml

пример фотогалереи на xml
Давайте рассмотрим все файлы по отдельности, где я постараюсь прокомментировать каждый.
html и cssCOPY
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Простое слайдшоу</title> <style type="text/css"> h1 {font-size:24px;font-weight:bold;color:rgb(50,50,250);} #contenitore {position:relative; margin:10px auto; width:500px; height:400px; overflow:hidden; border:1px solid; z-index:1;} #contenitore:hover > #avanti div, #contenitore:hover > #indietro div {display:block;} #box {position:absolute;left:50px;top:0;width:400px;height:400px;z-index:2;} #box img {width:400px;position:absolute;top:0;z-index:1;} #avanti {position:absolute;top:0; right:0;width:50px;height:100%;text-align:center; background:white;z-index:3;} #avanti div {margin:auto;position:absolute;top:0;bottom:0;right:0;left:0;width:0;height:0; border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:50px solid #000;display:none;} #indietro {position:absolute;top:0;left:0;width:50px;height:100%;text-align:center; background:white; z-index:3;} #indietro div {margin:auto;position:absolute;top:0;bottom:0;right:0;left:0;width:0;height:0; border-top:50px solid transparent;border-bottom:50px solid transparent;border-right:50px solid#000;display:none;} </style> <script type="text/jаvascript" src="slide.js"></script> </head> <body> <h1>Простой слайшоу</h1> <div id="contenitore"> <div id="box"></div> <div id="avanti"><div></div></div> <div id="indietro"><div></div></div> </div> <script type="text/jаvascript"> var slider = new SlideImage('img_Slide.xml','box','avanti','indietro'); slider.slideAutomatico(); slider.fermaAutomatico(); slider.riprendiAutomatico(); </script> </body> </html>
Здесь Вы можете подправить под себя высоту и ширину в основном блоке и в блоке непосредственно для слайдов.

В файле img_Slide.xml Вы указываете свои картинки для показа, их размеры и названия.

А чтобы изменить время показа каждого слайда в фотогалерее, Вам необходимо сделать нужные изменения в файле slide.js, который находится так же в архиве.
ВНИМАТЕЛЬНО! - их там 3 блока с кодом по 3 строки.

Изменения время показа слайдов в slide.js


if(newPosizione >= lMax){
    box.style.left = '50px';
    box.style.transition = '500ms ease';        // Здесь меняем время
  }else{
    box.style.left = newPosizione+'px';
    box.style.transition = '500ms ease';        // Здесь меняем время
    box.style.webkitTransition = '500ms ease';  // Здесь меняем время
  }
},false);
Данный скрипт простой фотогалереи для сайта абсолютно не сложный, и я уверен, что у Вас с ним не будет проблем.
А если всё-таки что-то будет не понятно, спрашивайте - я постараюсь помочь.

стрелка вниз Скачать простую фотогалерею для сайта на xml

Ссылка на файл: скачать архив
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!