Плавная смена изображений на 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/

Share

Comments

  1. Спасибо! Попробую применить на своем сайте.

  2. Петька Сокольников
    02.10.2009 - 07:50

    @Саша
    Не зачто. Я смотрю, что уже успешно применил!

  3. Идея золотая. Результатами исследований может кто-то похвастаться?

  4. Спасибо, очень помогли, сэкономил много времени.

  5. Петька Сокольников
    30.01.2010 - 16:53

    @alexxelaf
    Незачто, рад был помочь.

  6. Спасибо, очень грамотно и понятно! Хочу попробывать на 10 картинках!

  7. Спасибо большое, работает на всех браузерах и без всяких примудростей и ajaxов… Другие ресурсы предлагают более тяжелый вариант с тем же результатом! Будем посещать еще.

  8. здрасти всем, скрипт великолепный, но как можно еще добавить такую интересную фишку см. http://www.megalyrics.ru/songs/depeche-mode.htm, там снизу в правой части есть скрипт изменения фотографий такой же как у Вас, но переход между картинками происходит очень интересно, сверху вниз проходят шашечки которые меняют картинку..классная вещь, может можно что то добавить и Ваш скрипт…

  9. Виктор
    11.03.2010 - 11:07

    Сделал все как написано, с некоторыми изменениями:

    var total_pics_num = 4; // колличество изображений
    var interval = 3000; // интервал между изображениями
    var time_out = 10; // задержка кадров

    Не совсем коректно отображаеться, причину понять немогу, так, как на моем пк все окей, на другом интервал разный между сменой изображения, вышло както криво 🙁 в чем может быть проблема?

  10. При большем количестве изображений (21, например) лагает ваш скрипт.

  11. да, и с больими картинками тоже лагает(

  12. Роман
    15.12.2010 - 23:19

    Не получается! Выводятся все три картинки одновременно, одна под другой! Как вставить в html-код? Подскажите, что я делаю не правильно?

  13. Петька Сокольников
    17.12.2010 - 20:22

    @Роман
    Что-то со стилями у вас не так. Не сработало абсолютное позиционирование (position: absolute;).

  14. Петька Сокольников
    17.12.2010 - 20:28

    @лайт
    @Илья
    Конечно будет лагать и притормаживать при таких нагрузках. Можно попробовать сделать плавность поменьше.
    Заменить строку
    opacity—;
    на строку
    opacity = opacity — 5;

    Будет не так плавно, но поменьше сожрет ресурсов.

  15. Сергей
    17.03.2011 - 17:42

    У меня ничего не получается(( А почему у вас в кодах рисунков что-то непонятное с кавычками?

  16. Петька Сокольников
    18.03.2011 - 22:04

    @Сергей
    Парсер постов так заменил кавычки.
    Возьми нормальный код из исходника страницы http://tutorials.xyz.net.ua/css_javascript_opacity/

  17. Игорёк
    21.03.2011 - 16:13

    Скрипт работае на ура с 15-ью изображениями… но встала такая задача: нужно чтоб картинки выбирались случайным образом, а не по-порядку… Очень надо..

  18. Артем
    13.05.2011 - 12:50

    У меня проблемка — из-за свойства absolute картинка позиционаруется где хочет, игрорируя разметку HTML. Можно ли «приручить»ее — то есть заставить быть именно там где нужно? Например, в конкретной ячейке таблицы… Я просто хочу сделать несколько таких картинок в разных определенных частях экрана. И их положение по моей задумке будет определяется ячейками таблицы, в которой они будут находиться.

    Спасибо!

  19. Петька Сокольников
    26.05.2011 - 23:02

    @Артем
    Помести картинки в блок с указанием style=»position: relative»
    А этот блок располагай в любом месте табличной верстки.

  20. а можно с помощью этого скрипта сделать чтобы сменялся фон сайта, скажем 12 изображений, и чтоб прокручивался фон вместе с контентом?

  21. Доброе утро знатоки!
    Скажите а можно ли сделать скрипт на подобии этого только с автосменной изображения в заданое время…(время сервера сайта)
    Просто очень нужно для сайта онлайн радио…для автосменны граф-ника Ведущего!!!
    Т.е. Вставляем несколько путей на изображения и выставлем данное время для каждого изображения!!!
    Возможно такое реализовать?

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

Your email address will not be published / Required fields are marked *