Using Jquery to Highlight the Background Image in a Circle

I currently have 3 images named back_about_1.jpg, back_about_2.jpg, and back_about_3.jpg.

There is a div with the ID "about" - 

<div id="about"></div>

The default background image of the div is set to back_about_1.jpg using CSS - 

background: url(../img/back_about_1.jpg) 50% 0 no-repeat fixed;background-size:cover;

I am looking to programmatically change the background image of this div every 5 seconds. Once the background is set to the third image, I would like it to loop back to the first image.

If anyone has any JQuery suggestions or solutions, they would be greatly appreciated! :)

jquerycssbackground

Answer №1

If you have something similar to the following:

#about{
  background: 50% 0 no-repeat fixed;background-size:cover;
}

You can achieve the desired effect with the code below:

$(function(){
   //Potential images
   var images = ["img/back_about_1.jpg", "img/back_about_2.jpg", "img/back_about_3.jpg"];
   (function changeBg(index){
        $("#about").css('backgroundImage', 'url(' + images[index] +')');
        setTimeout(function(){
            changeBg((index + 1) % images.length);  //This loops through the images
        }, 5000);
   })(0);

});

I hope this solution is useful. Thank you

Answer №2

Check out this unique JQuery method.

In order to implement this solution, you will need to organize 3 div elements with specified backgrounds inside another div. Here's how:

HTML

<div class="fadein">
    <div id="rotatingImage1"></div>
    <div id="rotatingImage2"></div>
    <div id="rotatingImage3"></div>
</div>

CSS

#rotatingImage1{background:url('https://example.com/image/slide1.jpg') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage2{background:url('https://example.com/image/slide2.jpg') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage3{background:url('https://example.com/image/slide3.jpg') no-repeat;position:absolute;width:500px;height:500px;}

And here's the custom JQuery code snippet:

jQuery(document).ready(function(){ 
    $(function(){
        $('.fadein div:gt(0)').hide();
        setInterval(function(){
          $('.fadein :first-child').fadeOut(1000)
             .next('div').fadeIn(1000)
             .end().appendTo('.fadein');}, 
          2000);
    });
});

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

Having trouble getting jQuery click event to work with Express for loading a Handlebars page

My jQuery on click function is not working properly in conjunction with Express to route to a handlebars page and display the passed information. I have attempted different solutions such as changing the HTTP method from GET to POST, not using handlebars ...

javascriptjqueryexpresshandlebars.js

What is the best way to link a generated PHP-AJAX link with a jQuery action?

Imagine a scenario like this: trollindex.htm: [...] <script> $(document).ready(function(){ $("* a.jquery").on("click",function(){ $.ajax({ type: "POST", url: "trollcommander.php", data: ({comman ...

javascriptphpjqueryhtmlajax

Is it possible to create a French flag using only CSS within one div?

What is the semantically correct way to display the French flag using only HTML and CSS? <div id="flag"> <h1>French flag</h1> </div> To represent the French flag with pure CSS (33% blue, 33% white, 33% red), you can use the fo ...

htmlcsssemantics

Guide on implementing a looping settimeout function on a sliding page to dynamically load an HTML template within the Framework 7 framework

My current setup involves using Framework7 (framework7.io). The code below functions correctly on the main view page, utilizing a looping settimeout to refresh signups.html every second: <script type=“text/javascript” src=“code.jquery.com/jquery- ...

javascriptjqueryhtmlhtml-framework-7

aviary usage resulted in a file_get_contents error

I successfully integrated aviary into my webpage and it's functioning properly. However, I'm encountering an issue with using the file_get_contents command to retrieve the saved image. Here's the aviary code: JS: <!-- Load Feather code ...

javascriptphpjqueryaviary

Ways to add values to a database through modal window

There are two buttons on the interface: login and register. Clicking the login button opens the login modal, while clicking the register button should open the register modal. My objective is to validate the form and insert the values into a database aft ...

javascriptphpjquerytwitter-bootstrap

what is the best way to send file input value to a JQuery function?

How can I pass the file input value to a jQuery function, when there can be multiple files selected? Below is the code snippet I am currently working with: HTML <input id="images" name="images[]" placeholder="" class="form-control input-md" type="file ...

jqueryhtmlajax

Generate a link that can easily be shared after the content has loaded using

One feature on my website involves a content container that displays different information based on which list item is clicked (such as news, videos, blogs, etc.). This functionality is achieved by using jQuery's load method to bring in html snippets ...

javascriptphpjqueryhtmlajax

How can I trigger an Iframe JavaScript function from within my webpage?

I have an Iframe within my page, with the following JavaScript code: function getTotSeats(){ window.WebAppInterface.showToast(document.forms[0].txtSeat_no.value); return document.forms[0].txtSeat_no.value; } I would like to call the above Jav ...

javascriptphpjquery

What's the reason behind this file not opening?

When I try to insert this code into files index.html, style.css, and app.js, the page refuses to open. The browser constantly displays a message saying "The webpage was reloaded because a problem occurred." I am using a MacBook Air with macOS Big Sur and a ...

javascripthtmlcss

Is the order of SCSS (SASS) selectors important when dealing with nested classes?

Exploring SCSS Styles for List Items In this code snippet, I am investigating the order of selection for classes and pseudo-selectors in SCSS. Specifically, I am questioning whether &:before.active is equivalent to &.active:before. Here is an exa ...

csssasscss-selectors

Updating a div using Ajax within a Rails application

In my to-do app, each task has subtasks stored in div elements with p id="task_"+<%=task.id%>I have a form for creating a new subtask on every show page of my project. To understand better, here is the code I am using: This is the show.html.erb fil ...

jqueryruby-on-railsajax

Modify the div's background color specifically with AngularJS

After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list. I have accomplished this by defining two distinct CSS classes with the main difference being the background colo ...

htmlcssangularjs

Form-select failing to transmit data

There seems to be an issue with one specific HTML field not sending data. This is my HTML code: <form id="login_registro_form" role="form" method="post" action="./controllers/register.php"> <div cl ...

phphtmljqueryformsbootstrap-5

Challenges with Implementing Background Images on my Website with HTML and CSS

Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I ...

htmlcss

Enhance the worth of text box

Is there a way to adjust the value of a textbox by one on keyup, keydown, or tap events? Check out this example. Here is the HTML structure: <div class="right-content" id="rc-0" style="height: 250px;"> <div class="right-cont-main" id="rcm-0" s ...

javascriptjqueryhtmlcss

CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...

css

Creating a personalized music player using an audio tag with HTML, CSS, and JavaScript

I am currently working on developing a unique music player from scratch without utilizing the "controls" tag within the audio element. My goal is to build something akin to the SCM Music Player. I've chosen not to use the SCM-provided player due to it ...

javascripthtmlcss

jquery event listeners issue

Guideline 1: Whenever span id="B" is clicked, it assigns the text value of Div B to input box id=A. Guideline 2: When text input box id="A" loses focus, the value of div B becomes blank. When clicking on A and then B, B is cleared befor ...

jquerylistener

How can I ensure that the insertBefore function in jQuery only executes once, upon the initial click event?

jquery $(function(){ $('#4').click(function() { $('<input name="if4" type="text" value="other price>"').insertBefore('form textarea'); }); }); html <form> < input name="name" type="text" value="Enter yo ...

jqueryappendto