Adjust the background of the page at regular intervals

Question

Adjust the background of the page at regular intervals

I currently have:

<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
    document.getByTagName("body").src="icwXI.jpg";
    imageID++;
}
else{if(imageID==1){
    document.getByTagName"body").src="JvuP9.jpg";
    imageID++;
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*20)); 
</script>
</head>
<body style='background: url(icwXI.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;' onload='changeimage(1)'>

The goal is to display icwXI.jpg as the initial body background image, then switch to JvuP9.jpg after 20 seconds, and cycle back to icwXI.jpg 2 seconds later.

Despite my limited JavaScript skills, the code does not seem to be functioning correctly.

Thank you.

javascript html css

Answer 1

Answer №1

Generate a collection of background images - below you will find an example using placekitten images. Next, establish a function that switches the background with the next image in the collection. To keep track of our current position, a variable will be used (you could consider using the .indexOf method on arrays in modern browsers, however, support may be limited in certain environments).

Lastly, we will set up an interval that triggers every 23 seconds. This interval will execute the swapBG function and then immediately set a timeout to repeat the function after 2 seconds.

// backImg keeps track of the current image displayed
// dbStyle is a shortcut to access the body's style properties
// backgnd contains a list of background images
var backImg = -1,
    dbStyle = document.body.style,
    backgnd = [
        'url(http://placekitten.com/350/350)',
        'url(http://placekitten.com/349/349)'
    ]; 

// Progresses through background images, looping back to the start
// when reaching the end of the list
function swapBG() {
    dbStyle.backgroundImage = backgnd[ backImg++ ]
        ? backgnd[ backImg ]
        : backgnd[ backImg = 0 ];
}

// Call swapBG() right away
swapBG();

// Set up an interval that triggers every 23 seconds
setInterval(function(){
   swapBG();
   // Set a timeout to run after 2 seconds
   setTimeout(function(){ 
       swapBG()
   }, 2000 );
}, 23000);

Live Example: http://jsfiddle.net/XsAWB/2/

Answer 2

Generate a collection of background images - below you will find an example using placekitten images. Next, establish a function that switches the background with the next image in the collection. To keep track of our current position, a variable will be used (you could consider using the .indexOf method on arrays in modern browsers, however, support may be limited in certain environments).

Lastly, we will set up an interval that triggers every 23 seconds. This interval will execute the swapBG function and then immediately set a timeout to repeat the function after 2 seconds.

// backImg keeps track of the current image displayed
// dbStyle is a shortcut to access the body's style properties
// backgnd contains a list of background images
var backImg = -1,
    dbStyle = document.body.style,
    backgnd = [
        'url(http://placekitten.com/350/350)',
        'url(http://placekitten.com/349/349)'
    ]; 

// Progresses through background images, looping back to the start
// when reaching the end of the list
function swapBG() {
    dbStyle.backgroundImage = backgnd[ backImg++ ]
        ? backgnd[ backImg ]
        : backgnd[ backImg = 0 ];
}

// Call swapBG() right away
swapBG();

// Set up an interval that triggers every 23 seconds
setInterval(function(){
   swapBG();
   // Set a timeout to run after 2 seconds
   setTimeout(function(){ 
       swapBG()
   }, 2000 );
}, 23000);

Live Example: http://jsfiddle.net/XsAWB/2/

Answer 3

Answer №2

Before you proceed, make sure to address the syntax errors present in your code. Remember to close all opening { brackets and fix the missing parenthesis in the document.getByTagName function.
It's important to note that your function does not have a delay before changing the background image on its first call. Consider implementing a sleep or timeout to achieve the desired effect.
When using setTimeout() to repeat the function, remember that the second parameter represents milliseconds, not seconds as you may have initially thought.
Update your function to handle multiple background changes by adjusting the conditions based on the imageID variable. Make sure to account for each background image you want to cycle through.
Correct the method for changing the background image from
```
document.getTagByName("body").src
```
to
```
document.body.style.backgroundImage
```
for accurate results.

Answer 4

Before you proceed, make sure to address the syntax errors present in your code. Remember to close all opening { brackets and fix the missing parenthesis in the document.getByTagName function.
It's important to note that your function does not have a delay before changing the background image on its first call. Consider implementing a sleep or timeout to achieve the desired effect.
When using setTimeout() to repeat the function, remember that the second parameter represents milliseconds, not seconds as you may have initially thought.
Update your function to handle multiple background changes by adjusting the conditions based on the imageID variable. Make sure to account for each background image you want to cycle through.
Correct the method for changing the background image from
```
document.getTagByName("body").src
```
to
```
document.body.style.backgroundImage
```
for accurate results.

Adjust the background of the page at regular intervals

Answer №1

Answer №2

Similar questions

To ensure proper functionality, make sure that Python Selenium's Geckodriver is correctly

Use jQuery to switch the class of the designated DIV in the showcasing slider

An empty array is being returned from a mongoose function call

What is the best way to retrieve the DOM of a webpage that uses MP4 file extension?

Angular's implementation of deferred only displays the final value in the loop

Markdown Custom Parsing

How can I ensure the footer stays at the bottom of the page using a table layout?

Limiting the input frequency when executing a query with the `urql` GraphQL Client in React.js

Tips for adjusting the speed of animations in Odometer/vue-odometer

Issue with scrollIntoView in devices with a width lower than 1200px

The class type "selectLabel" passed to the classes property in index.js:1 for Material-UI is not recognized in the ForwardRef(TablePagination) component

"Learn the process of converting HTML content into a string in an Android application and then displaying

Discovering the file extension and ensuring its validity when imported from Google Drive

The JSON GET method displays HTML content when accessed through code or console, but presents a JSON object when accessed through a web address

Utilizing Jquery cycle to overlay a div on top of a scrolling image

Concealing URL in client-side fetch request within Next.js

A textarea with a height of zero is still visible

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

jQuery fails to recognize response

The fitBounds and panToBounds functions in react-google-maps fail to properly adjust the map's size