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

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);
 }
}

<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>