body{
background-image: "image.jpg";
}
How can I change the background image suppose 'image1.jpg,image2.jpg...' after 5s.
Found this script on StackOverflow for changing the image, but I also need to change it after few seconds and also Without Click
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url("image2.jpg")');
});
</script>
body{
background-image: "image.jpg";
}
How can I change the background image suppose 'image1.jpg,image2.jpg...' after 5s.
Found this script on StackOverflow for changing the image, but I also need to change it after few seconds and also Without Click
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url("image2.jpg")');
});
</script>
-
2
Possible duplicate of How to change background on every 5s You would need to change
10000to5000though. – yuriy636 Commented Apr 16, 2017 at 18:00 - @yuriy636, I did check toggle the background-image, without clicking i.e. by time interval and was not able to find it. Hence had to post the question. If there is any such question and I skipped it, my apologies. And Daniel solved the problem. – Dhaval Jardosh Commented Apr 16, 2017 at 19:28
4 Answers
Reset to default 6put your urls or img path inside the array, it will loop through every image. started with first one.
use
setIntervalif you need this keep running forever. (setTimeout will run once per call)
$(document).ready(function() {
var urls = ['https://pp.userapi./c629327/v629327473/db66/r051joYFRX0.jpg', 'https://www.codeproject./KB/GDI-plus/ImageProcessing2/img.jpg', 'https://img.wikinut./img/gycf69_-6rv_5fol/jpeg/0/Best-Friends-Img-Src:Image:-FreeDigitalPhotos.jpeg', 'http://www.travelettes/wp-content/uploads/2014/03/IMG_3829-Medium-600x400.jpg'];
var cout = 1;
$('body').css('background-image', 'url("' + urls[0] + '")');
setInterval(function() {
$('body').css('background-image', 'url("' + urls[cout] + '")');
cout == urls.length-1 ? cout = 0 : cout++;
}, 5000);
});<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>you can also use a CSS animation:
body {
background:url(http://lorempixel./400/400/people/1);
animation: chbg 15s infinite alternate;
background-size:cover
}
@keyframes chbg {
0% {
background:url(http://lorempixel./100/100/people/1);
background-size:cover
}
20% {
background:url(http://lorempixel./100/100/people/7);
background-size:cover
}
40% {
background:url(http://lorempixel./100/100/people/6);
background-size:cover
}
60% {
background:url(http://lorempixel./100/100/people/2);
background-size:cover
}
80% {
background:url(http://lorempixel./100/100/people/9);
background-size:cover
}
100% {
background:url(http://lorempixel./100/100/people/8);
background-size:cover
}
}do you mean something like this . You can fill the array of colours with image paths!
var counter=0;
var colours=["red","green","blue"];
$(function() {
change();
function change() {
setTimeout(change,5000);
$('body').css('background-color', colours[counter] );
counter++;
if(counter==3){ counter=0;}
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>Easy Way To Do Is That with Function run code to chek
function run(interval, frames) {
var int = 1;
function func() {
document.body.id = "b"+int;
int++;
if(int === frames) { int = 1; }
}
var swap = window.setInterval(func, interval);
}
run(1000, 10); //milliseconds, frames#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html>
<body>
<body>
</html>