滚动时图像序列播放和停止

Question

此图像序列会自动播放，但我希望自动播放前7张图像，并在一次滚动后播放剩余的图像（8至15）。

我该怎么做？

＆＃13;

＆＃13;

onload = function startAnimation() {
  var frames = document.getElementById("animation").children;
  var frameCount = frames.length;
  var i = 0,
    j = 0;
  var interval = setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
    j++;
    if (j === 14) {
      clearInterval(interval);
      document.getElementsByClassName("d-none")[0].classList.add('d-block');

    }
  }, 100);
}

＆＃13;

#animation img {
  display: none;
}

#animation img:first-child {
  display: block;
}

.d-none {
  display: none
}

.d-block {
  display: block;
}

＆＃13;

<div id="animation">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-none">
  this div is aappear
</div>

＆＃13;

＆＃13;

＆＃13;