Javascript 通过jquery setTimeout更改css背景图像属性

我想使用jQuery每隔10秒更改一次标题图像（我在css中提供了它的源代码，而不是在HTML中）。 我可能有多达15个16个图像，所以我写的代码对于我的js文件来说可能太长了。 我写了下面的代码，但我正在寻找更紧凑的代码，希望使用数组

$(function() {
  setTimeout(function() {
    changeHeaderImg3()
  }, 10000);

  setTimeout(function() {
    changeHeaderImg2()
  }, 20000);

  setTimeout(function() {
    changeHeaderImg1()
  }, 30000);

  setTimeout(function() {
    changeHeaderImg4()
  }, 40000);
  setTimeout(function() {
    changeHeaderImg3()
  }, 50000);
});

function changeHeaderImg3() {

  $('header').css('background', 'url(assets/img/bg3.jpg) center center').css('background-size', 'cover');
  $('footer').css('background', 'url(assets/img/bg3.jpg) center center').css('background-size', 'cover');
};

function changeHeaderImg2() {

  $('header').css('background', 'url(assets/img/bg2.jpg) center center').css('background-size', 'cover');
  $('footer').css('background', 'url(assets/img/bg2.jpg) center center').css('background-size', 'cover');
};

function changeHeaderImg1() {

  $('header').css('background', 'url(assets/img/bg1.jpg) center center').css('background-size', 'cover');
  $('footer').css('background', 'url(assets/img/bg1.jpg) center center').css('background-size', 'cover');
};

function changeHeaderImg4() {

  $('header').css('background', 'url(assets/img/bg4.jpg) center center').css('background-size', 'cover');
  $('footer').css('background', 'url(assets/img/bg4.jpg) center center').css('background-size', 'cover');
};

function changeHeaderImg3() {

  $('header').css('background', 'url(assets/img/bg3.jpg) center center').css('background-size', 'cover');
  $('footer').css('background', 'url(assets/img/bg3.jpg) center center').css('background-size', 'cover');
};

---

如果您有一个图像URL数组，则可以使用setInterval定期更新页眉/页脚图像。大概是这样的：

var imgUrls = [
    'assets/img/bg1.jpg',
    'assets/img/bg2.jpg',
    'assets/img/bg3.jpg',
    'assets/img/bg4.jpg',
    // ... etc.
];

var currentImageIndex = 0;

// Create a callback that will be invoked every 10 seconds
setInterval(function() {
    var imgUrl = imgUrls[currentImageIndex++];
    $('header').css('background', 'url(" + imgUrl + ") center center').css('background-size', 'cover');
    $('footer').css('background', 'url(" + imgUrl + ") center center').css('background-size', 'cover');

    // Make sure the currentImageIndex doesn't get too big
    if (currentImageIndex >= imgUrls.length) {
        currentImageIndex = 0;
    }
}, 10000);

另一个解决方案：

$(function() {
    let pictures = ["bg3.jpg", "bg2.jpg", "bg1.jpg"];
    $.each(pictures, function(i,e) {
        setTimeout(function() {
            changeHeaderImg(e);
        }, i*10000);
    });
}

function changeHeaderImg(pictureName: string) {
    $('header').css('background', 'url(assets/img/'+pictureName+') center center').css('background-size', 'cover');
    $('footer').css('background', 'url(assets/img/'+pictureName+') center center').css('background-size', 'cover');
}

---

只要您继续遵循

'assets/img/bg'+num+'.jpg'

格式，这将适用于任何数量的图像。只要在顶部设置页眉的数量，就可以了

$(function() {  
    var numHeaders = 4;

    var header = 0;
    setInterval(function() {
        header++;
        if (header > numHeaders) {
            header = 1;
        }
        $('header').css('background', 'url(assets/img/bg' + header + '.jpg) center center').css('background-size', 'cover');
        $('footer').css('background', 'url(assets/img/bg' + header + '.jpg) center center').css('background-size', 'cover');
    }, 10000);
});

---

您可以为

changeHeader

函数设置一个参数，如下所示：

函数changeHeader（url）{/*您的代码放在这里*/}

。并且

setTimeOut

可以在它里面。