表示時間をズラして画像を切り替える方法について

Question

JavaScript初心者です。簡単なアニメーションを作りたいのですが実装方法がわからず困っています。

やりたいこと

4枚の画像が0.1秒毎にズームしながら切り替わり、0.5秒毎に（または5回目の処理で）ズームしながら画像を3秒間表示する。

説明が分かりにくくすみません。つまり、
1.png→2.png→3.png→4.png→1.png→2.png…の順で0.1秒ごとにパッパッパっと画像が切り替わって、一周して1.pngに戻ってきた時に3秒表示。またパッパっと切り替わって2.pngに来た時に3秒表示…みたいなものが作りたいです。

試したこと

ズームしながら0.1秒毎に切り替えまでは調べて分かりましたが、「0.5秒毎に3秒表示」の部分がつまっています。
なんとなくsetTimeoutを使うんだろうということは分かるのですが書き方が分からず、ご教授頂けないでしょうか。
動きの部分はcssで行っています。また、フェードインと記載してますが実際はフェードではなく切り替わる感じにしています。

ソースコード

    <ul id="slide_wrapp">
      <li class="slide_item"><img src="img/1.png" alt=""></li>
      <li class="slide_item"><img src="img/2.png" alt=""></li>
      <li class="slide_item"><img src="img/3.png" alt=""></li>
      <li class="slide_item"><img src="img/4.png" alt=""></li>
    </ul>

   #slide_wrapp{
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 500px;
}
  .slide_item{
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.01s linear, transform 1s linear;  //秒数に注意
    position: relative;
    z-index: 1;
}
  .slide_item:not(:first-child){
    position: absolute;
    top: 0;
    left : 0;
}
    .slide_item.show_{
    opacity: 1;
}
    .slide_item.zoom_{
    transform: scale(1.02);
}
    .slide_item img{
    display: block; //下に余白ができないように
}

    function sliderStart() {

    const slide = document.getElementById('slide_wrapp');      //スライダー親
    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
    const totalNum = slideItem.length - 1;                     //スライドの枚数を取得
    const FadeTime = 1000;                                     //フェードインの時間
    const IntarvalTime = 1000;                                 //クロスフェードさせるまでの間隔
    let actNum = 0;                                            //現在アクティブな番号
    let nowSlide;                                              //現在表示中のスライド
    let NextSlide;                                             //次に表示するスライド

    // スライドの1枚目をフェードイン
    slideItem[0].classList.add('show_', 'zoom_');

    // 処理を繰り返す
    setInterval(() => {
        if (actNum < totalNum) {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[++actNum];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        } else {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[actNum = 0];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        };
    }, IntarvalTime);

}

何卒よろしくお願いします。

Answer 1

<script>
let count=4;
setInterval((function loop(){
  for(let i=0;i<5;i++){
    setTimeout(()=>{
      document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.remove('ani');
      document.querySelector(`#slide_wrapp li.prev`)?.classList.remove('prev');
      document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('prev');
      count++;
      if(count>4) count=1;
      document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('ani');
    },100*i);
  }
  return loop;
})(),3500);
</script>

<style>
#slide_wrapp{
list-style:none;
position:relative;
}
#slide_wrapp li{
position:absolute;
top:0;
}
#slide_wrapp li.ani{
z-index:2;
}
#slide_wrapp li.prev{
z-index:1;
}
#slide_wrapp li:not(.ani):not(.prev){
z-index:0;
}
#slide_wrapp li.ani img{
animation: ani 0.1s;
}
@keyframes ani{
  0%{ width:0%;}
  100%{ width:100%;}
}
</style>
<ul id="slide_wrapp">
<li><img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1"></li>
<li><img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2"></li>
<li><img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3"></li>
<li><img src="https://placehold.jp/000000/ffffff/150x150.png?text=4"></li>
</ul>

※一部バグ修正

追加

以下、最初1を3秒間（くらい）とめる

let count=1;
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#slide_wrapp li:first-child').classList.add('prev');
});
setInterval(()=>{
  for(let i=0;i<5;i++){
    setTimeout(()=>{
      document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.remove('ani');
      document.querySelector(`#slide_wrapp li.prev`)?.classList.remove('prev');
      document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('prev');
      count++;
      if(count>4) count=1;
      document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('ani');
    },100*i);
  }
},3500);

Comments

[kogi]

ありがとうございます！本当に助かりました！！

[yambejp]

ごめんなさい、一部バグがあったので修正してあります
（表示の切り替えがはやすぎてバグにきがつかなかった）

[kogi]

修正までありがとうございます…！
それと、厚かましく大変恐縮なのですが、1枚目のスライドを３秒間表示させてから始まるようにするにはどのようにすればいいか教えていただけるととても助かります。。

[yambejp]

＞1枚目のスライドを３秒間表示させてから始まる

1を3秒まって2>3>4>1>2　から始める感じでしょうか？

[kogi]

そうです！1枚目のズームインからスタートしたあと0.1秒で切り替えたいです！

[yambejp]

仕様上最初の止める長さがめくりの分だけ長くなりますがそれでよければ追加分でできるはずです

[kogi]

大丈夫でした！
お忙しいところ本当にありがとうございました！！とても助かりました。