may88seiji
6/16/2017 - 12:27 PM

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

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

style.css
content_copyfile_download
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;
}
replaceAddClass.js
content_copyfile_download
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()
md.md
content_copyfile_download
  • Rendered
  • Source

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

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

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

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

###全体の実行 init()

index.html
content_copyfile_download
<ul>
  <li>春</li>
  <li>夏</li>
  <li>秋</li>
  <li>冬</li>
</ul>