Петька Сокольников

Как то появилась задача сделать плавную смену изображений в 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/