CODEWITHSUNDEEP
javascripthtmljquery
Idris
Idris

Reputation: 518

How to switch between 3 class names at an interval of 5 seconds infinitely

How do I infinitely switch different class names on an element with an interval of 5 seconds like this:

By default, at 0 seconds, the element has a class name of 'banner-1' like this: <div classname="hero banner-1">Hero</div>

At 5 seconds, the element has a class name of 'banner-2' and 'active' like this: <div classname="hero banner-2 active">Hero</div>

At 10 seconds, the element has a class name of 'banner-3' and 'active' like this: <div classname="hero banner-3 active">Hero</div>

At 15 seconds, the element goes back to the default class name of only 'banner-1' like this: <div classname="hero banner-1">Hero</div>

At 20 seconds, the element has a class name of 'banner-2' and 'active' like this: <div classname="hero banner-2 active">Hero</div>

And it goes on like that infinitely for 25, 30, 35 seconds with an interval of 5 seconds infinitely.

Using Jquery, I have been able to do this but it's not working well and I am not sure how I have to go about the logic to include the third class and make it work perfectly:

setInterval(function() {
    if($('.hero').hasClass('banner-2 active')) {
      $('.hero').addClass("banner-3 active").removeClass("banner-2");
    } else {
      $('.hero').addClass("banner-2 active").removeClass("banner-3");
    }
  }, 5000)

How do I achieve it correctly javascript?

Upvotes: 0

Views: 340

Answers (4)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You could do something like this:

var arr = ["banner-1", "banner-2", "banner-3"]
var ele = $('.hero');
$(document).ready(function() {
  setInterval(function() {
    var c = ele.attr("class").split(' ')[1];
    var i = arr.indexOf(c) + 1;
    ele.removeClass(c);
    ele.addClass((i == arr.length ? arr[0] : arr[i]))
  }, 5000);
});

Demo

var arr = ["banner-1", "banner-2", "banner-3"]
var ele = $('.hero');
$(document).ready(function() {
  setInterval(function() {
    var c = ele.attr("class").split(' ')[1];
    var i = arr.indexOf(c) + 1;
    ele.removeClass(c + " active");
    ele.addClass((i == arr.length ? arr[0] : arr[i] + " active"))
  }, 5000);
});
.banner-1{color: yellow}
.banner-2{color: blue}
.banner-3{color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero banner-1">Hero</div>

Upvotes: 2

kiranvj
kiranvj

Reputation: 34117

Will this work for you. The timer adds the class based on a class array. I have added some background colors to see it working. (Default don't have .active class )

var arrClass = ["banner-1", "banner-2 active", "banner-3 active"];

var counter = 0;

setInterval(function() {
  // remove all class and add new class
  $("#hero").removeClass("banner-1 banner-2 banner-3 active").addClass(arrClass[counter]);
  
  // reset or increment counter
  counter = counter >= 3 ? 0 : counter + 1
}, 5000);
.banner-1 {
  background-color: red;
}

.banner-2 {
  background-color: blue;
}

.banner-3 {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hero" class="hero banner-1">Hero</div>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177885

Vanilla JS:

Change 1000 to 5000 in your code

window.addEventListener("load", function() {
  const ele = document.querySelector('.hero');
  let cnt = 1;
  setInterval(function() {
    ele.classList.remove("banner-" + cnt);
    cnt++;
    if (cnt > 3) cnt = 1;
    ele.classList.add("banner-" + cnt);
    ele.classList.toggle("active", !ele.classList.contains("banner-1"));
  }, 1000);
});
.banner-1 {
  color: green;
}

.banner-2 {
  color: blue;
}

.banner-3 {
  color: red;
}

.active {
  font-weight: bold;
  border: 1px solid black;
  display: inline-block;
}
<div class="hero banner-1">Hero</div>

Upvotes: 1

Martijn
Martijn

Reputation: 16103

As you havent provided what you've tried and thus nothing for us to provide feedback on, I'm going to give you some example code for you to turn into an actual solution:

let currentActive = 1; // remember where we are now
const maxItems = 3; // how many items?

setInterval(
    function(){
        // - remove 'active' from the currentActive element
        currentActive++;
        // if the currentActive > maxitems, set it back to 1
        // - add 'active' to the new currentActive element
    }, 
    5000
);

Upvotes: 0

Related Questions