javascript - 如何使用设置间隔

Question

在我的网站上，我想有两个背景图片，它们随着 setInterval 的变化而变化，但我不知道如何让它工作/

CSS:

body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-image: url(/Assets/img/image1.jpg), url(/Assets/img/image2.jpg);
        background-repeat: repeat-x, repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

.js:

$(document).ready(function () {

    (function () {
        var curImgId = 0;
        var numberOfImages = 2; // Change this to the number of background images
        window.setInterval(function () {
            $('body').css('background-image', 'url(/background' + curImgId + '.jpg)');
            curImgId = (curImgId + 1) % numberOfImages;
        }, 15 * 1000);
    })();
});

我需要一些帮助来使用 setInterval 在 image1.jpg 和 image2.jpg 之间切换

编辑

我已将我的 js 更改为:

  $(document).ready(function () {
        setInterval(function () {
            $('body').toggleClass("/Assets/Style/background/Images1.css", "/Assets/Style/background/Images2.css");
        }, 15000);
    });

添加了两个 CSS 类:

Images1.css:

body {

    background-image: url(/Assets/img/image1.jpg);
}

Images2.css:

body {

    background-image: url(/Assets/img/image2.jpg);
}

但是我的背景还是没变

Answer 1

为了简化事情，我将有两个包含您想要的图像的 CSS 类。将第一类设置为默认值，然后执行如下操作:

$(document).ready(function () {
    setInterval(function() {
          $('body').toggleClass('class2');
    }, 15000); 
});

Working Demo