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

J隐藏示例：https://jsfiddle.net/faehzLjp/1/