Iterate through three images using the `background-image` property in my Div

Question

Iterate through three images using the `background-image` property in my Div

Is there a way to modify a code that loops through images based on an Img source in order to work with the "background-image" property of a div?

HTML

<div id="section2"></div>

CSS

#section2 {
background-image: 'url(..images/banner1.jpg');
}

JAVASCRIPT

<script type = "text/javascript">
(function() {     
var i = 1;
var pics = [ "images/banner1.jpg", "images/banner2.jpg", "images/banner3.jpg" ];
var el = document.getElementById('section2');  
function toggle() {
    el.src = pics[i];           
    i = (i + 1) % pics.length;  
}
setInterval(toggle, 3000);
})();             
  </script>

Any suggestions on how to accomplish this modification are appreciated :)

javascript jquery html css

Answer 1

Answer №1

One method is to utilize CSS classes in place of sources.

JS:

<script type = "text/javascript">
(function() {     
var i = 1;
var classes = [ "bgd-1", "bgd-2", "bgd-3" ]; // modified
var el = document.getElementById('section2');  
function toggle() {
    el.className = classes[i]; // modified           
    i = (i + 1) % classes.length; // modified 
}
setInterval(toggle, 3000);
})();             
</script>

CSS:

#section2.bgd-1 {
    background-image: url('..images/banner1.jpg');
} 

#section2.bgd-2 {
    background-image: url('..images/banner2.jpg');
} 

#section2.bgd-3 {
    background-image: url('..images/banner3.jpg');
}

Note:

Utilize

el.className += ' ' + classes[i];

to add a class name without replacing all element classes.

Answer 2

One method is to utilize CSS classes in place of sources.

JS:

<script type = "text/javascript">
(function() {     
var i = 1;
var classes = [ "bgd-1", "bgd-2", "bgd-3" ]; // modified
var el = document.getElementById('section2');  
function toggle() {
    el.className = classes[i]; // modified           
    i = (i + 1) % classes.length; // modified 
}
setInterval(toggle, 3000);
})();             
</script>

CSS:

#section2.bgd-1 {
    background-image: url('..images/banner1.jpg');
} 

#section2.bgd-2 {
    background-image: url('..images/banner2.jpg');
} 

#section2.bgd-3 {
    background-image: url('..images/banner3.jpg');
}

Note:

Utilize

el.className += ' ' + classes[i];

to add a class name without replacing all element classes.

Iterate through three images using the `background-image` property in my Div

Answer №1

Similar questions

Numerous toggles available for the mobile version

Stopping the webdriver in Node.js gracefully without crashing it can be achieved through a

Display an Open Dialog window when a Button is clicked

Managing form submissions using Jquery and checkboxes

Tips on modifying the interface based on the selected entry using jQuery

Attempting to utilize a Jquery Ajax post method to retrieve information from my specified URL and display it within my HTML Div element

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

Calling an ajax request to view a JSON pyramid structure

Steps to eliminate validation following the clearing of input fields

Problem with logo in MVC4 apps

React Native: Why is useState setter not causing a re-render?

Dealing with object properties that may not always be present in Vue.js template tags

Creating a dynamically changing AppBar component in material-ui-next React that responds to scroll events

Creating a hover effect for a div in jQuery or CSS: Keeping the div visible even when hovered

Create a JavaScript program that can identify which number in a given array is different from the other two when two of the numbers in the array are equal

Stop dishonesty in a timed internet assessment

Using PHP to generate a table populated with generic elements from an array

A guide on conditionally rendering components in React

How to customize a disabled paper-input element in Polymer 1.0?

Mysterious issue causing PHP $_POST to return null