Blog. Just Blog

Эффектное слайд-шоу на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:
  1. <div style="position: relative; height:600px; width:800px;"></div>
Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:
  1. <div style="position: relative; height:600px; width:800px;">
  2.    <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
  3.    <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
  4. </div>
Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.
  1. var op=1;          // Прозрачность
  2. var img_front=1;   // Индекс отображаемой картинки
  3. var img_back=2;    // Индекс фоновой картинки
  4. var img_total=10;  // Общее количество картинок в ротации
  5.  
  6. // Функция изменения прозрачности отображаемой картинки
  7. function fade() {
  8.     // Непрозрачность уменьшается
  9.     op-=0.1;
  10.     if (op<0) {
  11.         // Картинка непрозрачная
  12.         op=1;
  13.  
  14.         // Берем следующие картинки
  15.         img_front++;
  16.         img_back++;
  17.         // Если показали все, то переходим обратно на первую
  18.         if (img_front>img_total) { img_front=1; }
  19.         if (img_back>img_total) { img_back=1; }
  20.  
  21.         // Установить новые картинки на фон и отображение
  22.         var tmp=document.getElementById('sh_front');
  23.         // Прозрачность для браузеров
  24.         tmp.style.opacity=op;
  25.         // Прозрачность для IE
  26.         tmp.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity=100)';
  27.         tmp.src='img/'+img_front+'.jpg';
  28.         var tmp=document.getElementById('sh_back');
  29.         tmp.src='img/'+img_back+'.jpg';
  30.  
  31.         // Пауза между сменой картинок в 5 секунд
  32.         setTimeout('waiting()',5000);
  33.     }
  34.     else {
  35.         // Установить новое значение прозрачности для верхней картинки
  36.         var tmp=document.getElementById('sh_front');
  37.         // Прозрачность для браузеров
  38.         tmp.style.opacity=op;
  39.         // Прозрачность для IE
  40.         tmp.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+
  41.               Math.round(op*100)+')';
  42.  
  43.         // Следующая итерация цикла затухания
  44.         setTimeout('fade()',50);
  45.     }
  46. }
  47.  
  48. // Функция запуска эффекта затухания
  49. function waiting() {
  50.     fade();
  51. }
Код достаточно простой, но все-таки некоторые моменты требуют пояснений. Здесь подразумевается, что все картинки слайд-шоу имеют одинаковый размер, соответствующий размеру области слайд-шоу, находятся в папке "img" и упорядочены по именам, начиная с "1.jpg" до "10.jpg". В вашем проекте пути и имена файлов могут быть другими. Интервал задержки между сменой кадров задан жестко - 5000 миллисекунд или 5 секунд. Скорость одной итерации затухания - 50 миллисекунд. Эти значения можно уменьшить или увеличить по необходимости. Осталось только запустить слайд-шоу.
  1. <div style="position: relative; height:600px; width:800px;">
  2.    <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
  3.    <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
  4. </div>
  5.  
  6. <script type="text/javascript">
  7. // Запустить слайд-шоу через 5 секунд
  8. setTimeout('waiting()',5000);
  9. </script>
Готовый пример слайд-шоу вы можете посмотреть у меня на сайте: простой вариант из статьи и улучшенный вариант скрипта. Второй вариант более гибкий в настройках, более надежный и написан в более правильном стиле, но из-за этого для новичков он может оказаться сложным при установке на сайт.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 13100 | Комментариев: 9

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
казявка (09.11.2017 в 03:37):
напишите пжлста скрипт (css, html или JavaScript - без разницы), чтоб фоновая картинка сайта менялась плавно в СЛУЧАЙНОМ ПОРЯДКЕ, чтоб картинки можно было самому выбрать или по ссылке или из папки, ну для примера хотя-бы для 5 картинок а я уж потом доделаю чтоб их было 40 или ещё больше.......
ManHunter (28.02.2016 в 21:06):
На демонстрационной странице смотрел? Или так, лишь бы в лужу пернуть?
Влад (28.02.2016 в 09:31):
нет цикла
Сергей (09.09.2013 в 02:01):
Извиняюсь, MozBorderRadius так и было, но в старенькой мозиле 3 не работает, хотя сам -moz-border-radius работает в ней же в css. На более поздних версиях не проверял.

Все, разобрался, в css в третьей версии закругляет рамки, а не изображения, начиная с версии 3.5 все работает, спасибо.
ManHunter (09.09.2013 в 00:54):
При использовании в JS правильно пишется MozBorderRadius и webkitBorderRadius. Регистр каждой буквы имеет значение.
Сергей (08.09.2013 в 23:59):
Подскажите пожалуйста, как во втором варианте сделать закругление углов слайдов? С border-radius разобрался: tmp.style.borderRadius='10px';
А вот как быть     с -moz-border-radius и -webkit-border-radius с тире перед ними? tmp.style.MozborderRadius='10px'; не работает.
Станислав (20.07.2013 в 23:34):
То что я искал, спасибо большое. Осталось видеоплеер с плей листом и буду счастлив)
ManHunter (18.07.2013 в 13:32):
Под разными вариантами я имел в виду различные сдвиги картинок, "жалюзи", растворение через CSS3 filter blur, через HTML canvas, может еще что-нибудь вспомню.
Isaev (18.07.2013 в 13:16):
Просто и приятно выглядит, спс)

"как сделать плавное перетекание одного изображения в другое. Есть разные варианты"
Прозрачность это самое простое наверное, но очень ресурсоёмкая она
видел бы ты как это выглядит на слабенькой видюхе )
у меня на работе если на странице сайта используется прозрачность, то его даже скролить невозможно и мышка дёргается... Потому стараюсь по возможности её избегать.
а "разные варианты" можно описать коротко?

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0048 сек.) / Память: 4.5 Mb
Наверх