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

如何使用setInterval

1 个答案: