есть такой код, он показывает слайд-шоу из 5 картинок. Но картинки меняются мгновенно. Помогите сделать так, что бы они менялись плавно.
Что то типа, текущая погасала плавно, а следующая плавно высвечивалась.

[JS]all_images = new Array (
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg");
var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 3000;
var lock = false;
var run;

function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) { ImgNum = ImgLength; }
document.slide_show.src = all_images[ImgNum];
}
}

function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
[/JS]

[JS]<div id="center">
<table>
<tr align="center">
<td colspan="3"><img src="img/0.jpg" name="slide_show"></td>
</tr>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Предыдущая</a></td>
<td align="center"><a href="javascript:auto()">Старт/Стоп</a></td>
<td align="left"><a href="javascript:chgImg(1)">Следующая</a></td>
</tr>
</table>
</div>

<script type="text/javascript">
auto();
</script>[/JS]