html リスト要素に一定间隔（秒）でクラスを付け替えていくhttp://backyard.in4design.jp/2017/02/blog-post_17.html

Posted 2021-05-11

ul li {
  text-align: center;
  padding: 50px 0;
  color: #fff;
  font-size: 96px;
  display: none;
}
 
ul li:nth-child(1) {
  background-color: #19184c;
}
 
ul li:nth-child(2) {
  background-color: #113623;
}
 
ul li:nth-child(3) {
  background-color: #f2b633;
}
 
ul li:nth-child(4) {
  background-color: #a8411e;
}
 
ul li.ON {
  display: block;
}

function init(){

  var s = $('ul li.Item');
  var n = s.length;

  function replaceAddClass(i) {
    s.eq(i).siblings().removeClass('is-active');
    s.eq(i).addClass('is-active');
  }

  var i = 0; replaceAddClass(i);
  setInterval(function(){
    i++;
    if ( !(i < n) ) { i = 0; }
    replaceAddClass(i);
  }, 5000);
  
}

init()

###変数を求める
liの要素
liの個数

###is-active 付け替えのfunction replaceAddClassの用意
引数i
replaceAddClass
兄弟要素からremoveClass
該当indexにaddClass

###replaceAddClassの実行
iの初期化
replaceAddClass(i)の実行

###setInterval
i++ で増加
条件分岐 iがnをこえたときに初期化
i をreplaceAddClassの引数にして再実行

###全体の実行
init()

<ul>
  <li>春</li>
  <li>夏</li>
  <li>秋</li>
  <li>冬</li>
</ul>