Create a function that will repeatedly call itself at specified intervals, increment a variable, and update the class values of elements with an id matching the current value of the

I'm attempting to create a setup that cycles through different images

                        <div id="img_box" class="shadow" onload="imgCycle(1)";>
                        <img id="1" class='opaque imgbox selected' src="media/imgbox/chem.jpg" />
                        <img id="2" class='imgbox' src="media/imgbox/art.jpg" />
                        <img id="3" class='imgbox' src="media/imgbox/business.jpg" />
                        <img id="4" class='imgbox' src="media/imgbox/chess.jpg" />
                        </div>

by executing a function that removes the styles from all these images

                        function clearActiveImage(){
                        document.getElementById(1).className = "imgbox";
                        document.getElementById(2).className = "imgbox";
                        document.getElementById(3).className = "imgbox";
                        document.getElementById(4).className = "imgbox";
                    }

                        function imgCycle(x) {
                        if ( x == undefined ) { x = 1; }
                        clearActiveImage();
                        document.getElementById(x).className = "opaque imgbox selected";
                        x = x + 1;
                        if ( x >= 4) { x = 1; };
                        setInterval(imgCycle(x), 4000);
                        return;
                    };

then it increments a counter, and calls itself again after 4 seconds with the new counter. If the counter reaches 4, it should go back to 1.

I have implemented some css code that only displays the image with the opaque and selected classes.

#img_box img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}


#img_box img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

The page loads without any issues, but I'm struggling to make this feature work as intended.

Answer №1

Here is the solution you've been searching for:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
#img_box img {
    position: absolute;
}
</style>

<div id="img_box">
    <img src="http://photo.yourmlssearch.com/11/1_a/4582564-1.jpg" />
    <img src="http://photo.yourmlssearch.com/11/2_a/4582564-2.jpg" />
    <img src="http://photo.yourmlssearch.com/11/3_a/4582564-3.jpg" />
    <img src="http://photo.yourmlssearch.com/11/4_a/4582564-4.jpg" />
</div> 

<script type="text/javascript">
$('#img_box').append('<img src="'+$($('#img_box img')[0]).attr('src')+'">');

$('#img_box img').each(function(index,item){
    $(this).css('z-index',$('#img_box img').length - index);
});

setInterval(function(){
    var visibleImages = $('#img_box img:visible');

    if(visibleImages.length == 1) {
        visibleImages.css('z-index',$('#img_box img').length + 1);

        $('#img_box img').each(function(index,item){
            $(this).css('z-index',$('#img_box img').length - index).show();
        });
    }
$($('#img_box img:visible')[0]).fadeOut(4000,function(){

});
},10);
</script>

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

Navigating through directory paths in JavaScript can be a daunting task for many

In my app.js file, I've included the following code: app.use(multer({dest:'./uploads'})) What does './uploads' refer to here? It is located in the same directory as app.js. In what way does it differ from simply using uploads? I ...

Exploring the Integration of Node Modules with React

I am still learning about Node and I'm struggling to integrate an NPM package with my React project running on Node. Currently, I have a React component that successfully uploads a zip file through Node server scripts. Now, I am working on the next s ...

The transformation of all relative URLs into absolute URLs is carried out

The issue at hand seems to be peculiar to Chrome and Firefox, as IE does not exhibit the same behavior. In my angular application, I've noticed a strange phenomenon. Once a specific view is loaded, all XHR requests made using relative paths are autom ...

Discovering the root cause of why a particular CSS style is not being implemented correctly

Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...

When attempting to parse a JSON feed with jQuery and innerHTML, the data fails to display

Having trouble parsing a JSON feed using jQuery and innerHTML, but for some reason it's not working as expected. No errors are being displayed in the console and the feed itself is functioning properly. Not quite sure why this issue is occurring. < ...

Issue with fixed sidebar on brief content

It's interesting how the sticky widget performs differently on long articles compared to short ones on my website. Here is an example of a long article where the sticky widget works well without any lag: . Now, let's take a look at a shorter art ...

Verify that the user visits the URL in next.js

I need to ensure that a function only runs the first time a user visits a page, but not on subsequent visits. For example: When a user first opens the HOME page, a specific condition must be met. When they then visit the /about page, the condition for th ...

The issue with loading scripts in a ReactJS NextJS app is related to the inline condition not working

I'm having trouble with an inline condition for loading scripts. The condition seems to be working because the tag is displaying text, but when it comes to scripts, it doesn't work. How can I resolve this issue? const cookie = new Cookies().get ...

Neglecting to send a socket signal while assigning a variable to a socket message

In my client-side script, I am using the following snippet: socket.on('bla', function(data) { if (data == ID) { console.log('I don't understand what's happening here.'); } }) socket.on(ID, function(data) { ...

Filter products by pressing the "Enter" key while using the search input in

I have a list of products and I want to only display products that have a description or name containing the typed word when enter is clicked on the search input. Here is what I tried in my Search component: const Search = (props) => { return ( &l ...

A hyperlink unveils a visual and conceals its own presence

I'm a beginner in the world of coding and I have a question about creating a link that reveals a hidden image while hiding itself using HTML. After some research, this is what I've come up with: <a href="javascript: ...

Organize a collection of objects into a fresh array

I am facing an issue where I have an array and I need to transform it into an array of its children elements. var data = [{ name: 'Cars', content: 'BMW', value: 2000 }, ...

Checkbox label covering checkbox

I've been trying to enhance a login page with checkboxes by implementing code from react-bootstrap.github.io The issue I'm facing is that the checkboxes are overlapping their corresponding labels. Below is the snippet from my register.js file: ...

Importing JS files or SDKs in Angular that are not modules

Currently, I am incorporating the Avaya SDK (which consists of 3 JS files) into my Angular project. However, when attempting to import it, I encounter an error stating that it is not recognized as a module. Any suggestions on how to resolve this issue? Th ...

Retrieve data from API using ReactJS and passing parameters to the request

I am trying to retrieve information from the API based on the data I am sending, but encountering two issues: Initially, I hardcoded the information being sent to the API (year and term) as it should return the data I am trying to store, however, it is ...

What steps can be taken to retrieve data from a database table using JavaScript?

I am encountering a very peculiar issue. The values that I need are visible when I receive them as a message from the server-web console. However, when I try to retrieve them using a for loop, I encounter an error 05-22 18:58:23.203: I/Web Console(29392): ...

Position the text in the exact center of an HTML element using absolute positioning

Hey there! I am currently working on a website and I'm trying to create a simple delete button that can be used throughout the site. However, I'm having trouble getting it positioned correctly... Here's what I have so far: <button id="c ...

Recalling the position of the uploaded image within a v-for loop

I am struggling to solve this issue. Currently, I am utilizing Vue.js in an attempt to construct a dashboard where users can upload up to five images of visitors who are authorized to access a specific service provided by the user. Below is the code snip ...

How can serial numbers be sorted using a JavaScript If Statement based on 2 criteria?

I'm currently enrolled in a JavaScript coding course where I am tackling a task involving validating serial numbers. The requirement is to check if a serial number is valid and then add it to an array to store all the valid serial numbers. The criteri ...

Is it possible to use "/path/{?}" in a path when working with Node.js?

I am new to node.js and I'm working on creating a route that will verify the authorization of all users when the specified endpoint begins with /api. I've learned that an optional value can be indicated using ? like {_id?}, but is it possible to ...