Question

我希望我的网站背景每5秒更换一次图片。为此，我发誓一个jquery脚本。问题是图像不是全高或全宽。还有一件事是，在没有注意到背景的情况下，我无法使图像淡出和淡入。任何人都可以帮助我吗？

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
     $(window).load(function() {           
        var i =0; 
        var images = ['geral2.jpg','geral3.jpg','geral4.jpg','geral5.jpg','geral6.jpg'];
        var image = $('#slideit');
        image.css('background', 'url(geral1.jpg) no-repeat center center fixed');
        setInterval(function(){         
            image.fadeOut(1000, function () {
            image.css('background', 'url(' + images [i++] +') no-repeat center center fixed');
            image.fadeIn(1000);
            });
            if(i == images.length)
                i = 0;
        }, 5000);            
    });
</script>
</head>
<body>
        <div id="slideit" style="width:100%;height:100%; background-size: cover; -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;">
        </div>
</body>
</html>

更新：它是全屏，但循环第一个图像。我怎么解决？

http://codepen.io/Ryuh/pen/oLNvRj

Answer 1

在setInterval内，我们只需要覆盖background-image而不是background。这应该可以解决全屏问题。

image.css('background-image', 'url(' + images [i++] +')');

如何在jquery中制作背景幻灯片？

1 个答案: