jquery – Background images slide

Question:

I want to make a fadeIn/fadeOut slide with background images. I have this code that seems to be working except the background image doesn't change. Any tips?

CSS:

body, html {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

jQuery:

$('body').css({
        "background-image":"url(imgs/imgTest.jpg)"
    });
    var imgsArray = ['imgs/imgTest.jpg', 'imgs/yo.jpg', 'imgs/hey.jpg'];

    setInterval(function(){
        for (var i = 0; i < imgsArray.length; i++) {
            $('body').css({
                "background-image": imgsArray[i]
            });
        }
    }, 1000);

Answer:

With the code below you will be able to regularly

$(document).ready(function () {
    $('body').attr('style', 'background:url(http://www.lorempixel.com/300/300) no-repeat');

});
var imgsArray = ['http://www.lorempixel.com/300/300', 'http://www.lorempixel.com/300/300'];

setInterval(function () {
    for (var i = 0; i < imgsArray.length; i++) {
        $('body').attr('style', 'background: url(' + imgsArray[i] + ') no-repeat');
    }
}, 1000);

In the case of the example, since I'm getting lorempixel of the same size, it updates so fast that it gets the same image. To work, just change the lorempixel to the path of your image and furthermore adjust the speed of your setInterval .

Scroll to Top
AllEscort