指定した時間ごとにクラスを付け替えたい

初めて質問させていただきます。

実現したいこと

一定時間ごとに背景色（background）を変えたい

発生している問題・エラーメッセージ

setTimeoutを使い6秒毎にクラスを追加・削除して背景の色を替えることができましたが
最後のクラスまで行った後に、最初にもどる処理を実現できませんでした

該当のソースコード

html
1<div id="colorbox" class="color01">
2  <p>テキスト</p>
3</div>

css
1#colorbox{
2  width:100%;
3  height:300px;
4}
5
6.color01 {
7	background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
8}
9.color02 {
10  background: linear-gradient(180deg, rgb(239, 209, 184), rgb(224, 146, 149));
11}
12.color03 {
13  background: linear-gradient(180deg, rgb(219, 196, 189), rgb(191, 146, 108));
14}
15.color04 {
16  background: linear-gradient(180deg, rgb(227, 204, 159), rgb(213, 194, 90));
17}
18.color05 {
19  background: linear-gradient(180deg, rgb(219, 189, 189), rgb(110, 136, 103));
20}
21.color06 {
22  background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
23}

js
1$(function(){
2           setTimeout(function(){
3			   	$("#colorbox").toggleClass("color02");
4			    $("#colorbox").removeClass("color01");
5            },6000);
6           setTimeout(function(){
7			   $("#colorbox").toggleClass("color03");
8			   $("#colorbox").removeClass("color02");
9            },12000);
10           setTimeout(function(){
11			   $("#colorbox").toggleClass("color04");
12			   $("#colorbox").removeClass("color03");
13            },18000);
14           setTimeout(function(){
15			   $("#colorbox").toggleClass("color05");
16			   $("#colorbox").removeClass("color04");
17            },24000);
18           setTimeout(function(){
19			   $("#colorbox").toggleClass("color06");
20			   $("#colorbox").removeClass("color05");
21            },30000);
22           setTimeout(function(){
23			   	 $("#colorbox").toggleClass("color01");
24			   $("#colorbox").removeClass("color06");
25            },36000);
26 });

お手数ですが、ご教授いただけると助かります。

回答2件

ベストアンサー

この場合はtoggleClassではなくaddClassを使った方がいいと思います。

また、変数を活用してsetIntervalを使った方がいいと思います。

js
1$(function(){
2  let counter = 1;
3  setInterval(changeBackground, 6000);
4  function changeBackground() {
5    $("#colorbox").removeClass("color0" + counter);
6    if(counter >= 6) counter = 0;
7    $("#colorbox").addClass("color0" + ++counter);
8  }
9 });

サンプル
こうすることで、最初はcolor01を削除color02を追加...color06を削除color01を追加、とループすることができるはずです。

または、cssだけで設定できます。

css
1#colorbox{
2  width:100%;
3  height:300px;
4  animation: bgcolor 36s infinite;
5}
6
7@keyframes bgcolor {
8  0% {
9    background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
10  }
11  20% {
12    background: linear-gradient(180deg, rgb(239, 209, 184), rgb(224, 146, 149));
13  }
14  40% {
15    background: linear-gradient(180deg, rgb(219, 196, 189), rgb(191, 146, 108));
16  }
17  60% {
18    background: linear-gradient(180deg, rgb(227, 204, 159), rgb(213, 194, 90));
19  }
20  80% {
21    background: linear-gradient(180deg, rgb(219, 189, 189), rgb(110, 136, 103));
22  }
23  100% {
24    background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
25  }
26}

サンプル

投稿2023/01/24 11:38

編集2023/01/24 12:00

ypp

総合スコア35

回答へのコメント

ktaro1031

2023/01/24 14:06

ypp様ご返信ありがとうございます頂いたサンプルこそ、理想としている動きでした。 setIntervalも知らなかったため、お教えいただきありがとうございます。 JavaScriptのタイマー処理など改めて学習いたします。また、cssでの設定方法までも記載いただきありがとうございます。

color01とcolor06のbackgroundが同じものみたいですがよいのでしょうか？

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  let counter=1;
3  const min=1;
4  const max=6;
5  setInterval(()=>{
6    console.log(counter);
7    for(let i=min;i<=max;i++){
8      document.querySelector('#colorbox').classList.toggle(`color0${i}`,counter==i);
9    }
10    counter++;
11    if(counter>max) counter=min;
12  },1000);
13});