Javascript slideshow fade

Do you guys know what is wrong with my code? I'm trying to make a slideshow that fades images out and new ones in. It's fairly simple but I can't seem to get it to work.

Here's my HTML:

    <img src="images/slideshow/1.jpg" id="slide"></img>

And here's my JS:

    <script>
        var slideimages = new Array()
        slideimages[0] = new Image()
        slideimages[0].src = "images/slideshow/1.jpg"
        slideimages[1] = new Image()
        slideimages[1].src = "images/slideshow/2.jpg"
        slideimages[2] = new Image()
        slideimages[2].src = "images/slideshow/3.jpg"
    </script>

    <script>
        var step = 0

        setInterval(function() {

        if (!document.images)
            return

        document.getElementById('slide').src = slideimages[step].src

        if (step < 2)
            step++

        else
            step = 0
            var old = slideimages[step].src;
            old.fadeOut(2000);
            var next = slideimages[step + 1].src;
            next.fadeIn(2000);
        }, 5000);

    </script>

Any help is much appreciated!