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 :)

javascriptjqueryhtmlcss

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The built-in functions of Wordpress are not able to be identified in the ajax PHP file

As a newcomer to Wordpress development, I am facing challenges with implementing ajax on my WordPress site. I am currently working on a plugin that requires the use of ajax. However, my php file (xxxecommerce.ajax.php) is not recognizing the built-in Word ...

javascriptphpjqueryajaxwordpress

Using AngularJS to make repeated API calls with modified parameters

Issue - My task involves consolidating the response array into one. I am making consecutive calls to the same API, with a dynamic 'skip' parameter based on the last response. Call #1 - api(id, skip=0) Call #2 - api(id, skip+1) ... Below is the ...

javascriptangularjspromiseq

React - z-index issue persists

My React App with Autocomplete feature is almost complete, but I need some assistance to double-check my code. https://i.stack.imgur.com/dhmck.png In the code snippet below, I have added a search box with the className "autocomplete" style. The issue I a ...

javascripthtmlcssreactjs

How can we use jQuery to change the format of a

I'm working on a project where I want the calendar to display the date that the user picks. Right now, my "{{date}}" is in the format 2016-01-11, but it keeps showing one day before the selected date. I would like it to display as mm/dd/yyyy. I belie ...

jqueryhtml

What is the process for programmatically importing a module into the local scope in Node.js?

The coding environment is using a browser and the bundle tool being used is webpack. In my router.js file, I have the following code: import foo from './views/foo.vue' import bar from './views/bar.vue' import zoo from './views/zoo. ...

javascriptnode.jsvue.js

How can I align two div buttons at the top and bottom to appear on the left and right sides?

How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out th ...

htmlcssvue.js

Manually detecting changes in the query string using AngularJS

My AngularJS application includes an edit form with a routing URL like app/edit/:id. When I navigate to app/edit/5, I am able to edit the object with ID 5. However, if I manually change the URL to app/edit/6, the application loads the object with ID 6 in ...

javascriptangularjshttpgetquery-string

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via

Is there a way to display a loading image and disable a button for 3 seconds before sending post data from another page using AJAX POST? Once the OK button is clicked, I would like the loading image to appear and the <input type="button" value="Check" ...

javascriptphpjqueryajax

selecting a radio button and saving its value into a JavaScript variable

How can I assign the return value from a JavaScript script function to a variable inside the HTML body? The function will return the selected variable, but how can I assign it to a variable within my HTML body? <body> <form action="somepage.php ...

javascriptjquery

Issue with extended waiting times in polling

I am currently working on a chatroom using the long poll method. However, I'm facing an issue where every time a long poll occurs and I refresh the page in Chrome or try to send another async request, everything times out. This means I can't load ...

phpjavascriptajaxcomet

How can you use Dart to uncover the content within an H1 element on an HTML webpage?

I'm currently self-teaching mobile development with Dart and Flutter, and my current project involves connecting a mobile app to a website. I want to extract the text from an H1 tag that is loaded through JavaScript on the website and display it in th ...

javascripthtmldartmobile-application

Differences between Next.js Image and regular img tag regarding image quality

I am currently using Next.js and have noticed that my images appear slightly blurry when utilizing Next/Image. Below is a snippet of my code: <img src={url} width={articleWidth} /> <Image className="text-center" src={url} ...

htmlcssimagenext.js

Chrome's keyup event restricts the use of arrow keys in text fields

Could you please test this on Google Chrome browser: jQuery('#tien_cong').keyup(function(e) { jQuery(this).val(jQuery(this).val().replace(".", ",")); var sum = 0; var tien_cong = jQuery('#tien_cong').val(); tien_cong = tien_ ...

javascriptjquerygoogle-chrome

How to showcase a list from intricate JSON data using Angular

I recently came across this pre-existing JSON data that I am unable to change: {"tags": [ { "title": "news", "options": [ { "title": "important", }, { "title": "less important", ...

javascriptangularjsjsonhtml-listsangularjs-ng-repeat

Tips on incorporating personalized javascript functions into Durandal

I am currently working on my first project using the Durandal framework to create a basic website. I have encountered an issue while trying to incorporate a simple JavaScript function. My goal is to execute the function after the DOM has loaded, but I am u ...

javascriptdurandal

Enhance vue.js by adding your own custom filters

I am currently working with Vue.js integrated with Laravel using Elixir and Browserify. I am trying to create custom global filters, each in their own separate file. Despite following the documentation, I am encountering an issue where I receive the follow ...

javascriptbrowserifyjavascript-frameworkvue.jslaravel-elixir

The height of a DIV element can vary based on

Looking at this div structure: DIV3 has a fixed height. The nested DIV5 will be receiving content from Ajax, causing its height to change. Additionally, there are some DHTML elements inside it that also affect the height. DIV5 has a fixed min-height set. ...

javascripthtmlcss

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

htmlcss

PHP Multiple Uploads is a feature that allows users to

I'm currently attempting to utilize the dropzone JS plugin in combination with PHP for the purpose of uploading multiple files and then displaying each file's URL. Here is my progress so far: $upload_dir = 'files'; for($i=0; $i&l ...

javascriptphphtmlupload

Are arrays being used in function parameters?

Can the following be achieved (or something similar): function a(foo, bar[x]){ //perform operations here } Appreciate it in advance. ...

javascript