Эффектное слайд-шоу на JavaScript
Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;"></div>
Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;">
- <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
- <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
- </div>
Code (JavaScript) : Убрать нумерацию
- var op=1; // Прозрачность
- var img_front=1; // Индекс отображаемой картинки
- var img_back=2; // Индекс фоновой картинки
- var img_total=10; // Общее количество картинок в ротации
- // Функция изменения прозрачности отображаемой картинки
- function fade() {
- // Непрозрачность уменьшается
- op-=0.1;
- if (op<0) {
- // Картинка непрозрачная
- op=1;
- // Берем следующие картинки
- img_front++;
- img_back++;
- // Если показали все, то переходим обратно на первую
- if (img_front>img_total) { img_front=1; }
- if (img_back>img_total) { img_back=1; }
- // Установить новые картинки на фон и отображение
- var tmp=document.getElementById('sh_front');
- // Прозрачность для браузеров
- tmp.style.opacity=op;
- // Прозрачность для IE
- tmp.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity=100)';
- tmp.src='img/'+img_front+'.jpg';
- var tmp=document.getElementById('sh_back');
- tmp.src='img/'+img_back+'.jpg';
- // Пауза между сменой картинок в 5 секунд
- setTimeout('waiting()',5000);
- }
- else {
- // Установить новое значение прозрачности для верхней картинки
- var tmp=document.getElementById('sh_front');
- // Прозрачность для браузеров
- tmp.style.opacity=op;
- // Прозрачность для IE
- tmp.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+
- Math.round(op*100)+')';
- // Следующая итерация цикла затухания
- setTimeout('fade()',50);
- }
- }
- // Функция запуска эффекта затухания
- function waiting() {
- fade();
- }
Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;">
- <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
- <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
- </div>
- <script type="text/javascript">
- // Запустить слайд-шоу через 5 секунд
- setTimeout('waiting()',5000);
- </script>
Просмотров: 17063 | Комментариев: 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 все работает, спасибо.
Все, разобрался, в 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'; не работает.
А вот как быть с -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):
Просто и приятно выглядит, спс)
"как сделать плавное перетекание одного изображения в другое. Есть разные варианты"
Прозрачность это самое простое наверное, но очень ресурсоёмкая она
видел бы ты как это выглядит на слабенькой видюхе )
у меня на работе если на странице сайта используется прозрачность, то его даже скролить невозможно и мышка дёргается... Потому стараюсь по возможности её избегать.
а "разные варианты" можно описать коротко?
"как сделать плавное перетекание одного изображения в другое. Есть разные варианты"
Прозрачность это самое простое наверное, но очень ресурсоёмкая она
видел бы ты как это выглядит на слабенькой видюхе )
у меня на работе если на странице сайта используется прозрачность, то его даже скролить невозможно и мышка дёргается... Потому стараюсь по возможности её избегать.
а "разные варианты" можно описать коротко?
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,326 раз
Поблагодарили 34,326 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |