Image swaps with timer for button

I am working on a project where I have a page with 5 image buttons arranged horizontally. The objective is to have the images on each button change sequentially every 3 seconds in a continuous loop.

Here is my code:

$(document).ready(function (){
    BeginRotation();
});

function BeginRotation() {
    rotateButton(0);
}

function rotateButton(buttonIndex) {
  var previousIndex = (buttonIndex + 4) % 5;

  var previousCurrentClass = 'main-nav-button' + (previousIndex + 1) + '-on';
  var previousNewClass = 'main-nav-button' + (previousIndex + 1);
  var currentClass = 'main-nav-button' + (buttonIndex + 1);
  var newClass = 'main-nav-button' + (buttonIndex + 1) + '-on';

  // alert('Previous Current Class: ' + previousCurrentClass + '\nPrevious New Class: ' + previousNewClass + '\nCurrent Class: ' + currentClass + '\nNew Class: ' + newClass);

  $('.' + currentClass).removeClass(currentClass).addClass(newClass);
  $('.' + previousCurrentClass).removeClass(previousCurrentClass).addClass(previousNewClass);
  window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000);
}

Answer №1

One thing that is definitely incorrect

window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000);

The correct version should be

window.setTimeout("rotateButton(" + ((buttonIndex + 1) % 5) + ")", 3000);

Answer №2

I haven't personally tried this code, but a similar approach may be effective:

jQuery(function($){
    var $buttons = $('a.btn');
    var currentIndex = 0;

    setInterval(function() {
        $buttons.removeClass('rotateThis');
        $buttons[currentIndex].addClass('rotateThis');
        currentIndex = (currentIndex + 1 >= $buttons.size()) ? 0 : currentIndex + 1;
    }, 3000);
});

$('a.btn') should be adjusted to match the selector for your image buttons.

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

Obtain the value using jQuery from an AJAX request and display it

When I write the code below, the alert output is null: var availableSlots = ""; $.get( '', { availableSlots: userName }, function(a) { availableSlots = a; }); alert(availableSlots); Putting the alert inside the get function works fine, but ...

Activate automatic click or force trigger JavaScript function

In the MVC view I am working with, there is a form that allows for file submission. //Submit file <% using (Html.BeginForm("MethodName","ControllerName", FormMethod.Post, new { enctype = "multipart/form-data"})) { %> <input type=" ...

How can I replicate the Firefox style in IE8 using Bootstrap and CSS?

My webpage is styled with Bootstrap v2 and looks great in Firefox. However, I'm struggling to apply the same CSS color style in IE8: .navbar-inverse .navbar-inner { background-color: #1b1b1b; background-image: -moz-linear-gradient(top, #fab ...

Using PHP/JavaScript to activate a button once the timer reaches 00:00

I came across a JavaScript fiddle code that is working perfectly. Here it is: HTML <div id="worked">00:05</div> JS $(document).ready(function (e) { var $worked = $("#worked"); function update() { var myTime = $worked.h ...

Can you explain the variance between calling mongoose.Schema() and creating a new instance with new mongoose.Schema()?

Can you explain the distinction between mongoose.Schema() and new mongoose.Schema() methods? I have tried both approaches, and it seems like they yield similar results. Are there any notable differences or implications to consider? ...

Encountering a problem where PDF is displaying squares instead of text while using ReactDOM.createPortal to

Currently, I'm working on a React application where I am using createPortal in ReactDOM to open certain components in new windows. Everything seems to be functioning correctly, except when I try to render PDF files. Strangely, everything works fine wh ...

Custom-designed background featuring unique styles

I have implemented the following code to create a continuous running banner: <style> #myimage { position: fixed; left: 0%; width: 100%; bottom: 0%; background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bild ...

Steps for deactivating a button until the form has been submitted

Click here for the Fiddle and code sample: $(".addtowatchlistform").submit(function(e) { var data = $(this).serialize(); var url = $(this).attr("action"); var form = $(this); // Additional line $.post(url, data, function(data) { try { ...

When utilizing JavaScript syntax and performing API testing with Postman

Hello, I need some assistance from experts in connecting to Postman using the JavaScript code provided below. When running nodemon, the connection appears to be normal with no errors. Also, the GET request sent to Postman works fine. However, I am encounte ...

Using CSS for hover transitions can be glitchy in Safari, especially when trying to keep images centered

After seeing an example on Design Shack, I was inspired to create linkable photos that zoom in slightly when hovered over. To achieve the desired centered animation effect, I had to tweak the top, left, margin-top, and margin-left properties until it worke ...

"Unraveling the Mystery: Leveraging jQuery to Unleash the

I'm working on a script that looks like this: $(document).on("click", ".passingID", function () { var ids = $(this).attr('data-id'); $("#idkl").val( ids ); $.ajax({ method: "POST", url: ...

pop-up window that shows chosen choices using javascript or ajax

I have a specific HTML code that allows users to select multiple options. I would like these selected options to be displayed in a popup or a div in real-time as the user makes their selections. I have attempted using a selectbox with checkboxes, but extra ...

I am having trouble getting my CSS styles to apply to nested components within Bootstrap React components

Currently I am learning react and in the process of creating a website using react-bootstrap. While working on my navbar, I encountered an issue where I was unable to change the font and font-color of the navbar items. The CSS that I applied only affected ...

The absence of responseJSON in the jquery ajax response is causing an issue

Currently, I am developing a small web framework for conducting an HCI study and have encountered the following issue: In my setup, I have a Node server running with Express to serve local host data from JSON files. While it may not be the most advanced d ...

Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that sho ...

Using classes to override CSS

I've been going through the Material UI Overrides documentation in an attempt to customize the color of each radio button, but I'm having trouble grasping it conceptually. If I start with Material UI's default setup for radio buttons, how ca ...

How can I remove specific search results in a jQuery / AJAX app?

I have implemented some jQuery and AJAX to call a custom PHP function that fetches API data without refreshing the page. The results are appended, allowing for multiple searches without losing previous results. Now, I am looking to provide users with the ...

Safari is capable of rendering Jquery, whereas Chrome seems to have trouble

The code I am using renders perfectly in Safari but not in Chrome. Despite checking the console in Chrome, no errors are showing up. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="ht ...

Here's a step-by-step guide on how to parse JSON information in JavaScript when it's formatted as key-value

I need to parse the JSON data in JavaScript. The data consists of key-value pairs. Data looks like this: {09/02/2014 15:36:25=[33.82, 33.42, 40.83], 08/11/2014 16:25:15=[36.6, 33.42, 40.45], 07/30/2014 08:43:57=[0.0, 0.0, 0.0], 08/12/2014 22:00:52=[77.99 ...

Boost the delay in the transition speed for hiding the Navbar while scrolling down with the help of Bootstrap

Hi there! I am currently learning HTML, CSS, and JS. I'm working on a homepage project using Bootstrap-5 and have successfully integrated a navbar. However, I've noticed that the navbar disappears too quickly when I scroll down. Is there a way to ...