Javascript slideshow fade

Question

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!

Answer 1

You might want to give jQuery a shot. It will simplify your problem quite a bit.

    var slideimages = new Array()
    slideimages[0] = "..."
    slideimages[1] = "..."
    slideimages[2] = "..."

    var step = 0;
    setInterval(function() {
        step = (step+1) % slideimages.length;
        $('#slide').animate({
            'opacity': '0'   
        }, function() {
            // This is called when fading out is complete.
            $('#slide').attr('src', slideimages[step]);
            $('#slide').animate({ 'opacity': '1' });
        });
    }, 5000);

JFiddle example: https://jsfiddle.net/faehzLjp/1/