Javascript how to change a background Image based on a timer?

Question

I have the following script which changes the image being displayed based on a timer

<img id="image" src="image1.png">

        <script type = "text/javascript">
            var image = document.getElementById("image");
            var currentPos = 0;
            var images = ["image1.png","image2.png","image3.png"]

            function volgendefoto() {
                if (++currentPos >= images.length)
                    currentPos = 0;

                image.src = images[currentPos];
            }

            setInterval(volgendefoto, 3000);
        </script>

I want to apply this script to my websites background Image that I implement use CSS to allow the background Image to change WITHOUT Jquery

body{
  background-image: url("https://images.pexels.com/photos/260352/pexels-photo-260352.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-repeat: repeat;
  font-family:monospace;
}

You might want to consider using a solution with css only and animation keyframes. Have a look at this scenario: https://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations#7319497 — Adriano, Aug 16 '21 at 05:46

score 0 · Answer 1 · answered Aug 16 '21 at 05:23

0

The script needs to be changed a bit to

function volgendefoto() {
  if (++currentPos >= images.length) currentPos = 0;

  document.body.style.backgroundImage = "url(" + images[currentPos] + ")";
  document.body.style.backgroundRepeat = "no-repeat";
}

Here images[currentPos] should return a valid URL to the image and You can add more properties as you see fit for your use case.

answered Aug 16 '21 at 05:23

sathya reddy

707
3
11

for this "url(" + images[currentPos] + ")"; what does in front of the addition symbol? – Adam Gong Aug 16 '21 at 05:30
you can also use ` `url(${images[currentPos]})` ` – Musafiroon Aug 16 '21 at 05:33
I tried Implementing it but now the background Image does not change – Adam Gong Aug 16 '21 at 05:36

Hassan Raza · Answer 2 · 2021-08-17T05:51:02.310

var body = document.getElementsByTagName("body")[0];
var images = ['url("http://static.jsbin.com/images/jsbin_static.png")', 'url("http://static.jsbin.com/images/popout.png")'];
var current = 0;

function nextImage() {
  body.style.backgroundImage = images[current = ++current % images.length];
  setTimeout(nextImage, 1000);
}
setTimeout(nextImage, 1000);

<body>
</body>

Hope this might help js-fiddle:

var body = document.getElementsByTagName("body")[0];
var images = ['url("http://static.jsbin.com/images/jsbin_static.png")', 'url("http://static.jsbin.com/images/popout.png")'];
var current = 0;

function nextImage() {
  body.style.backgroundImage = images[current = ++current % images.length];
  setTimeout(nextImage, 1000);
}
setTimeout(nextImage, 1000);

JS_INF · Answer 3 · 2021-08-16T06:35:17.127

0

when you say without jQuery i think that you want to add style as object like in jQuery here's a simple method.can do that

function changeStyle(element, object) {
    for(var i in object) {
       element.style[i] = object[i];
    }
 }
//Usage
changeStyle(document.body, {
  "background-image": "url(image)",
  "background-repeat": "repeat",
  "font-family": "monospace"
})

using it with setInterval()

function changeStyle(element, object) {
    for(var i in object) {
       element.style[i] = object[i];
    }
 }
var n = 0, 
images = ["image1.png", "image2.png", "image3.png"]
function changeBody() {
  if(n === images.length) n = 0
   changeStyle(document.body, {
       "background-image": "url("+images[n]+")",
       "background-repeat": "repeat",
       "font-family": "monospace"
    })
     n++;
}
 setInterval(changeBody, 3000);

edited Aug 16 '21 at 06:35

answered Aug 16 '21 at 06:01

JS_INF

467
3
10

what if there are more than 3 images? It will always display 1st image after third one. – TechySharnav Aug 16 '21 at 06:19
so to change it for what I want, would I just create an array of Image urls instead of colors? – Adam Gong Aug 16 '21 at 06:24
yes and change the condition. to `yourArray.length` instead of `3` but if you will use `background-image` you will be need to use `url()` so you should write it like that `"background-image": "url("+yourArray[n]+")"` – JS_INF Aug 16 '21 at 06:27
I edited the answer for better understanding – JS_INF Aug 16 '21 at 06:35

score 0 · Answer 4 · answered Aug 16 '21 at 06:18

You need to change the url of background-image property, to a different image. You can do this by setting elem.style.backgroundImage.

var body = document.body;
var currentPos = 0;
var images = ["https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", "https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1260&q=750", "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"]  //replace this with array of your images

function volgendefoto() {
  if (++currentPos >= images.length)
    currentPos = 0;

  body.style.backgroundImage = `url(${images[currentPos]})`;
}

setInterval(volgendefoto, 3000);

body {
  background-image: url("https://images.pexels.com/photos/260352/pexels-photo-260352.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-repeat: repeat;
  font-family: monospace;
}

@Opal_Ding Hope this resolves your Issue. – TechySharnav Aug 16 '21 at 06:58 — TechySharnav, Aug 16 '21 at 06:58

Javascript how to change a background Image based on a timer?

4 Answers4