Смена картинки через время

[Pearl777]

Здравствуйте! Мне нужно сделать на сайте плавную смену картинок через определенное время. Нашел в интернете код смены картинок, но в нем не реализовано никакой плавности.

У меня есть следующий скрипт:

<img src="/images/fon.jpg" class="promo-img" id="image_id" />
<script>

var images  = ['/images/fon.jpg', '/images/fon1.jpg', '/images/fon2.jpg', '/images/fon3.jpg'],
    length  = images.length,
    index   = 1;

setInterval(function() {
    if(index == length) index = 0;
    document.getElementById('image_id').src = images[index++];
}, 4000);
</script>

Как можно сделать так, чтобы картинки менялись плавно?

[Ale}{ander]

JS

var img1 = document.getElementById('старая картинка');
var img2 = document.getElementById('новая картинка');

img1.style.opacity = '0';
img2.style.opacity = '1';

CSS

#картинка
{
opacity: 0;
transition: 2s;
}