Question

您好我一直在使用一些代码，让我可以通过淡入淡出来更改分隔符中的背景图像。然而我遇到的问题是，当我最初加载页面时，显示屏上没有图像......第一张图像在五秒后消失。我希望首先显示一个图像，然后淡入淡出。

我无法弄清楚如何做到这一点。任何帮助将非常感激。我正在使用以下代码：

<script type="text/javascript">
     $(window).load(function() {           
        var i =0; 
        var images = ['image2.jpg','image3.jpg','image1.jpg'];
        var image = $('#slideit');
        image.css('background-image', 'image1.jpg)');
        setInterval(function(){         
            image.fadeOut(1000, function () {
            image.css('background-image', 'url(' + images [i++] +')');
            image.fadeIn(1000);
            });
            if(i == images.length)
                i = 0;
        }, 5000);            
    });
</script>

然后在身体里：

<div id="slideit" style="width:100%;height:100%;"></div>

谢谢！

Answer 1

只需在HTML中设置第一张图片：

<div id="slideit" style="width:100%;height:100%;background-image: url(image2.jpg)"></div>

或使用javascript设置：

image.css('background-image', 'url(image2.jpg)');

您似乎错过了第6行中的url(...)。

jquery淡出淡出问题 - 初始图像不显示

1 个答案: