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

Question

I want my website's background to change images every 5 seconds. 我希望网站的背景每5秒钟更改一次图片。 For that I creare a jquery script. 为此，我创建了一个jQuery脚本。 The problem is that the images are not full-height or full-width. 问题是图像不是全高或全宽。 One more thing is that I can not make the images fade out and in without the withe background being noticed. 还有一件事是，如果不注意背景，我无法使图像淡入和淡出。 Can anyone help me? 谁能帮我？

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

UPDATE: It is full screen, but is looping the first image. 更新：这是全屏，但是正在循环播放第一张图像。 How can I solve? 我该如何解决？

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

Answer 1

Inside setInterval , we just need to overwrite background-image instead of background itself. 在setInterval内部，我们只需要覆盖background-image而不是background本身即可。 This should fix the full screen issue. 这样可以解决全屏问题。

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

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

问题描述

1 个解决方案

解决方案1
0 2016-05-27 13:30:31

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

问题描述

1 个解决方案

解决方案1 0 2016-05-27 13:30:31

解决方案1
0 2016-05-27 13:30:31