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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With