Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use setInterval

On my website i want to have two background images which are changing with setInterval but i don't know how to let this work/

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

I need some help to switch between image1.jpg and image2.jpg using setInterval

EDIT

I have change my js to:

  $(document).ready(function () {
        setInterval(function () {
            $('body').toggleClass("/Assets/Style/background/Images1.css", "/Assets/Style/background/Images2.css");
        }, 15000);
    });

added two css classes:

Images1.css:

body {

    background-image: url(/Assets/img/image1.jpg);
}

Images2.css:

body {

    background-image: url(/Assets/img/image2.jpg);
}

But still my background is not changing

like image 830
Java Afca Avatar asked Feb 12 '26 23:02

Java Afca


1 Answers

To simplify things, I'll have two CSS classes with images you want. Set first class as default and then do something like this:

$(document).ready(function () {
    setInterval(function() {
          $('body').toggleClass('class2');
    }, 15000); 
});

Working Demo

like image 88
Gurpreet Singh Avatar answered Feb 14 '26 13:02

Gurpreet Singh