如何通过javascript更改背景重复和背景大小

Question

我目前有这个并且它为我工作：

<script type='text/javascript'>
            $(function () {
                var body = $('body');
                var backgrounds = [
                  'url(http://localhost:12448/css/images/back1.jpg) no-repeat',
                  'url(http://localhost:12448/css/images/back2.jpg) no-repeat'];
                var current = 0;

                function nextBackground() {
                    body.css(
                        'background',
                    backgrounds[current = ++current % backgrounds.length]);

                    setTimeout(nextBackground, 5000);
                }
                setTimeout(nextBackground, 5000);
                body.css('background', backgrounds[0]);               
            });
</script>

我还需要将这部分css代码实现到我的javascript中，这样我就可以动态更改背景和相同的css设置：

body
    {
        background-image:           url('images/overlay.png'),      url('images/bg.jpg');
        background-repeat:          repeat,                         no-repeat;
        background-size:            auto,                           100% 100%;
    }

任何人都可以帮我吗？

Answer 1

解决方案：

此处的主要问题是您要设置background属性，该属性会覆盖所有-size，-repeat和-image属性。而是仅更改background-image属性。

这需要更改您的网址，因为您已将no-repeat附加到其末尾。

---

一些语法良好实践：

1. 不要在jQuery ready块中定义function。
2. 将相关变量放在jQuery块之外，以便它们是全局的并且可以在函数中使用。

---

＆＃13;
＆＃13;
var body = $('body');
var backgrounds = [
    'url(http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png)',
    'url(http://www.logospike.com/wp-content/uploads/2014/11/Google_logo-8.jpg)'
  ];
var current = 0;

$(function() {

  setTimeout(nextBackground, 5000);
  body.css('background-image', backgrounds[0]);
});

function nextBackground() {
  body.css(
    'background-image',
    backgrounds[current = ++current % backgrounds.length]);

  setTimeout(nextBackground, 5000);
}
＆＃13;
html{
  margin: 0;
  height: 100%;
}

body {
  background-image: url('images/overlay.png'), url('images/bg.jpg');
  background-repeat: repeat, no-repeat;
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;