Random background image every 5 seconds?
Question
I basically found this code and I tried to change it a bit. Instead of colors, I tried using images, but it didn't work out very well. I have checked other similar questions but it didn't quite give me the help I was looking for, anyway.
As you can see in the code, it randomly changes backgroundColor every 5000 milliseconds, I'm wondering how I can make it randomly change pictures (Background image) instead of colors?
<script type="text/javascript">
function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 9);
var ColorValue = "FFFFFF"; // default color - white (index = 0)
if(index == 1)
ColorValue = "FFCCCC"; //peach
if(index == 2)
ColorValue = "CCAFFF"; //violet
if(index == 3)
ColorValue = "A6BEFF"; //lt blue
if(index == 4)
ColorValue = "99FFFF"; //cyan
if(index == 5)
ColorValue = "D5CCBB"; //tan
if(index == 6)
ColorValue = "99FF99"; //lt green
if(index == 7)
ColorValue = "FFFF99"; //lt yellow
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey
document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
}
</script>
<body onload="setbackground();">
2 answers
solution1
0 ACCPTED 2014-08-19 18:02:40
You can do it this way:
<script type="text/javascript">
function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 9);
var ImagePath = "image0.jpg"; // default image
if(index == 1)
ImagePath = "image1.jpg";
if(index == 2)
ImagePath = "image2.jpg";
if(index == 3)
ImagePath = "image3.jpg";
if(index == 4)
ImagePath = "image4.jpg";
if(index == 5)
ImagePath = "image5.jpg";
if(index == 6)
ImagePath = "image6.jpg";
if(index == 7)
ImagePath = "image7.jpg";
if(index == 8)
ImagePath = "image8.jpg";
if(index == 9)
ImagePath = "image9.jpg";
document.getElementsByTagName("body")[0].style.backgroundImage="url('"+ ImagePath+ "')"
}
</script>
<body onload="setbackground();">
solution2
0
Here's an easy way to do it:
function setBackground(urls, targetId) {
setInterval(function() {
var index = Math.floor(Math.random() * (urls.length));
var target = document.getElementById(targetId);
target.style.backgroundImage = "url(" + urls[index] + ")";
}, 5000);
}
Where urls is an array of image urls, and targetId is the ID of the container you want to change the background-image property of.
Example on JSFiddle (with kittens)
--edit--
Keep in mind that while the new image is loading, the background (behind the background-image) is visible. To illustrate this, I set the background-color to red. As a new image begins to load, you will see a flash of red (which ironically fits the kitten theme).
--edit 2--
I reread your question, and it looks like you want to change the background image of the body. The function above (and in JSFiddle) works against a target ID. If you want to use it on the body, you can give your body an id and run the function with the bodies' id as a parameter. Or you can use this:
function setBackground(urls) {
setInterval(function() {
var index = Math.floor(Math.random() * (urls.length));
var target = document.getElementsByTagName("body")[0];
target.style.backgroundImage = "url(" + urls[index] + ")";
}, 5000);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.