?

Log in

No account? Create an account

xyzya


Petka Sokolnikov

блог обыкновенного фрилансера


Previous Entry Share Next Entry
Плавная смена изображений на JavaScript
xyzya

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

Это сообщение опубликованно в моём основном блоге. Вы можете комментировать как и тут, так и напрямую под сообщением в блоге.