Changing css background image property by jquery setTimeout

Question

I want to change my header image (which I gave it's source in the css, not in HTML) every 10 seconds Using jQuery. I may have up to 15 16 images so the code I wrote may be too long for my js file. I wrote the code below , but I'm looking for much compact code , hopefully using arrays.

$(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

If you have an array of image urls, you can use setInterval to periodically update your header/footer images. Something like this:

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

Another solution :

$(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

This will work for any number of images as long as you keep following your 'assets/img/bg' + num + '.jpg' format. Just set the number of headers you have at the top and you're good to go.

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