如何在间隔5秒的3个类名之间进行无限切换

Question

如何在间隔为5秒的元素上无限地切换不同的类名，如下所示：

默认情况下，在0秒时，元素的类名为‘bang-1’，如下所示：<div classname="hero banner-1">Hero</div>

在5秒时，元素的类名为‘bang-2’和'active‘，如下所示：<div classname="hero banner-2 active">Hero</div>

在10秒时，元素的类名为‘bang-3’和'active‘，如下所示：<div classname="hero banner-3 active">Hero</div>

15秒时，元素返回到默认的类名‘bang-1’，如下所示：<div classname="hero banner-1">Hero</div>

20秒时，元素的类名为‘bang-2’和'active‘，如下所示：<div classname="hero banner-2 active">Hero</div>

它无止境地持续了25，30，35秒，间隔为5秒。

使用Jquery，我已经能够做到这一点，但是它工作得不太好，我也不知道如何才能包含第三个类并使它完美地工作：

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)

如何正确实现javascript？

Answer 1

香草JS：

将代码中的1000更改为5000

​

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>

​

Answer 2

你可以这样做：

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>

​

Answer 3

由于您没有提供您尝试过的内容，因此我们没有提供任何反馈，所以我将给您一些示例代码，以便您将其转化为一个实际的解决方案：

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