如何自动无限连续地滚动一个充满图片的div元素？

<div class="image-slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

.image-slider {
  width: 100%;
  height: 300px; /* 假设图片高度为300px */
  overflow: hidden;
  white-space: nowrap;
}

.image-slider img {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

function scrollImages() {
  var imageSlider = document.querySelector('.image-slider');
  var firstImage = imageSlider.querySelector('img:first-child');

  var imageWidth = firstImage.width;
  var marginLeft = parseInt(window.getComputedStyle(imageSlider).marginLeft);

  // 向左滚动
  imageSlider.style.marginLeft = (marginLeft - imageWidth) + 'px';
}

function scrollImages() {
  var imageSlider = document.querySelector('.image-slider');
  var firstImage = imageSlider.querySelector('img:first-child');
  var lastImage = imageSlider.querySelector('img:last-child');

  var imageWidth = firstImage.width;
  var marginLeft = parseInt(window.getComputedStyle(imageSlider).marginLeft);

  // 向左滚动
  imageSlider.style.marginLeft = (marginLeft - imageWidth) + 'px';

  if (marginLeft <= -imageWidth) {
    // 当滚动到最后一张图片时，重置左边距
    imageSlider.style.marginLeft = 0;
    imageSlider.appendChild(firstImage);
  }
}

setInterval(scrollImages, 3000); // 每隔一定时间滚动一次，例如3秒