3

在我的网站上，我想要两个背景图像随着 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 类：

图片1.css：

body {

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

图片2.css：

body {

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

但我的背景仍然没有改变

4

1 回答 1

5

为简化起见，我将有两个带有您想要的图像的 CSS 类。将第一类设置为默认值，然后执行以下操作：

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

工作演示

于 2013-05-14T08:52:07.950 回答