Javascript 幻灯片淡入淡出

Question

你们知道我的代码有什么问题吗？我正在尝试制作一个幻灯片，淡出图像并进入新图像。这相当简单，但我似乎无法让它工作。

这是我的 HTML:

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

这是我的 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>

非常感谢任何帮助!

Answer 1

您可能想尝试一下 jQuery。它会大大简化你的问题。

    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 示例:https://jsfiddle.net/faehzLjp/1/