Плавная смена изображений на JavaScript
Как то появилась задача сделать плавную смену изображений в web-странице. Решением задачи решил поделиться с вами. Некоторые используют для этого CSS-свойство filter, но понимает его только Internet Explorer, поэтому пришлось искать реализацию, которая работала бы в разных браузерах.
Сначала немного теории.
Используя абсолютное позиционирование, набрасываем в разные слои несколько изображений. И только одно из них должно отображаться сразу, а остальные проявляться со временем.
Чтобы сделать плавную смену одного изображения другим, надо играться со свойствами прозрачности. Любой нормальный браузер понимает CSS3-свойство opacity (принимает значение от 0 до 1), любой но только не Internet Explorer, для него тоже самое приходится делать при помощи filter: alpha(opacity) (принимает значение от 0 до 100).
Мы разобрались с инструментарием для изменения прозрачности, далее надо подумать как сделать смену одного изображения другим. Для этого нам надо через определенный промежуток времени запускать механизм плавного изменения свойств opacity и filter: alpha(opacity) для одного изображения в сторону уменьшения, для другого же в сторону увеличения. Для этого будет использоваться JavaScript-функция setInterval();. Само же плавное изменение уровня прозрачности мы будем делать пошагово пересчитывая значение соответствующих CSS3-свойств, задавая задержку между шагами при помощи JavaScript-функции setTimeout();
Процесс работы скрипта будет выглядеть примерно так:
Имеем три изображения, наложенных одно на другое. Но два из них с минимальным значением прозрачности, и таким образом отображается только одно изображение.
Одновременно изменяя в сторону уменьшения значения прозрачности первого изображения мы увеличиваем значение прозрачности второго.
То же самое повторяем с изображением 2 и 3, потом между 3 и 1, и так далее по кругу.
Вот примерно таким образом должно всё происходить.
Ну и наконец сам листинг скрипта:
<script language=JavaScript>
var total_pics_num = 3; // колличество изображений
var interval = 4000; // интервал между изображениями
var time_out = 10; // задержка кадровvar i = 0;
var timeout;
var opacity = 100;function fade_to_next()
{
opacity—;
var k = i + 1;
var image_now = ‘image_’ + i;
if (i == total_pics_num)
{
k = 1;
}
var image_next = ‘image_’ + k;
document.getElementById(image_now).style.opacity = opacity/100;
document.getElementById(image_now).style.filter = ‘alpha(opacity=’+ opacity +’)’;
document.getElementById(image_next).style.opacity = (100-opacity)/100;
document.getElementById(image_next).style.filter = ‘alpha(opacity=’+ (100-opacity) +’)’;
timeout = setTimeout(«fade_to_next()»,time_out);
if (opacity==1)
{
opacity = 100;
clearTimeout(timeout);
}
}setInterval(function () {
i++;
if (i > total_pics_num) i=1;
fade_to_next();
},interval);</script>
<img src=’1.jpg’ id=»image_1″ style=»position: absolute;»>
<img src=’2.jpg’ id=»image_2″ style=»opacity: 0; filter: alpha(opacity=0); position: absolute;»>
<img src=’3.jpg’ id=»image_3″ style=»opacity: 0; filter: alpha(opacity=0); position: absolute;»>
Как это работает можно посмотреть тут:
http://tutorials.xyz.net.ua/css_javascript_opacity/
Саша
16.09.2009 - 13:14
Спасибо! Попробую применить на своем сайте.
Петька Сокольников
02.10.2009 - 07:50
@Саша
Не зачто. Я смотрю, что уже успешно применил!
Maksim
11.10.2009 - 09:05
Идея золотая. Результатами исследований может кто-то похвастаться?
alexxelaf
30.01.2010 - 16:25
Спасибо, очень помогли, сэкономил много времени.
Петька Сокольников
30.01.2010 - 16:53
@alexxelaf
Незачто, рад был помочь.
Sergey
09.02.2010 - 20:16
Спасибо, очень грамотно и понятно! Хочу попробывать на 10 картинках!
AndreyK
11.02.2010 - 18:13
Спасибо большое, работает на всех браузерах и без всяких примудростей и ajaxов… Другие ресурсы предлагают более тяжелый вариант с тем же результатом! Будем посещать еще.
Амир
07.03.2010 - 06:59
здрасти всем, скрипт великолепный, но как можно еще добавить такую интересную фишку см. http://www.megalyrics.ru/songs/depeche-mode.htm, там снизу в правой части есть скрипт изменения фотографий такой же как у Вас, но переход между картинками происходит очень интересно, сверху вниз проходят шашечки которые меняют картинку..классная вещь, может можно что то добавить и Ваш скрипт…
Виктор
11.03.2010 - 11:07
Сделал все как написано, с некоторыми изменениями:
var total_pics_num = 4; // колличество изображений
var interval = 3000; // интервал между изображениями
var time_out = 10; // задержка кадров
Не совсем коректно отображаеться, причину понять немогу, так, как на моем пк все окей, на другом интервал разный между сменой изображения, вышло както криво 🙁 в чем может быть проблема?
Илья
23.07.2010 - 17:18
При большем количестве изображений (21, например) лагает ваш скрипт.
лайт
14.09.2010 - 13:58
да, и с больими картинками тоже лагает(
Роман
15.12.2010 - 23:19
Не получается! Выводятся все три картинки одновременно, одна под другой! Как вставить в html-код? Подскажите, что я делаю не правильно?
Петька Сокольников
17.12.2010 - 20:22
@Роман
Что-то со стилями у вас не так. Не сработало абсолютное позиционирование (position: absolute;).
Петька Сокольников
17.12.2010 - 20:28
@лайт
@Илья
Конечно будет лагать и притормаживать при таких нагрузках. Можно попробовать сделать плавность поменьше.
Заменить строку
opacity—;
на строку
opacity = opacity — 5;
Будет не так плавно, но поменьше сожрет ресурсов.
Сергей
17.03.2011 - 17:42
У меня ничего не получается(( А почему у вас в кодах рисунков что-то непонятное с кавычками?
Петька Сокольников
18.03.2011 - 22:04
@Сергей
Парсер постов так заменил кавычки.
Возьми нормальный код из исходника страницы http://tutorials.xyz.net.ua/css_javascript_opacity/
Игорёк
21.03.2011 - 16:13
Скрипт работае на ура с 15-ью изображениями… но встала такая задача: нужно чтоб картинки выбирались случайным образом, а не по-порядку… Очень надо..
Артем
13.05.2011 - 12:50
У меня проблемка — из-за свойства absolute картинка позиционаруется где хочет, игрорируя разметку HTML. Можно ли «приручить»ее — то есть заставить быть именно там где нужно? Например, в конкретной ячейке таблицы… Я просто хочу сделать несколько таких картинок в разных определенных частях экрана. И их положение по моей задумке будет определяется ячейками таблицы, в которой они будут находиться.
Спасибо!
Петька Сокольников
26.05.2011 - 23:02
@Артем
Помести картинки в блок с указанием style=»position: relative»
А этот блок располагай в любом месте табличной верстки.
Егор
26.06.2011 - 20:16
а можно с помощью этого скрипта сделать чтобы сменялся фон сайта, скажем 12 изображений, и чтоб прокручивался фон вместе с контентом?
zoOmer
31.01.2012 - 06:04
Доброе утро знатоки!
Скажите а можно ли сделать скрипт на подобии этого только с автосменной изображения в заданое время…(время сервера сайта)
Просто очень нужно для сайта онлайн радио…для автосменны граф-ника Ведущего!!!
Т.е. Вставляем несколько путей на изображения и выставлем данное время для каждого изображения!!!
Возможно такое реализовать?