Question

我希望每10秒使用jQuery更改我的标题图像（我在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');
};

Answer 1

如果您有一组图片网址，则可以使用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);

Answer 2

另一种解决方案：

$(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');
}

Answer 3

只要您继续遵循'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);
});

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

3 个答案: