图片自动左右滚动js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片自动滚动</title>
<style>
  #scrollingDiv {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  #scrollingDiv img {
    width: 200px; /* 根据需要调整图片宽度 */
    height: auto;
    display: inline-block;
  }
</style>
</head>
<body>

<div id="scrollingDiv">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 添加更多图片 -->
</div>

<script>
function scrollImages() {
  var scrollingDiv = document.getElementById('scrollingDiv');
  var scrollAmount = -1; // 滚动速度，负值表示向左滚动

  function scroll() {
    scrollingDiv.scrollLeft += scrollAmount;
    if (scrollingDiv.scrollLeft <= -scrollingDiv.scrollWidth / 2) {
      scrollingDiv.scrollLeft = scrollingDiv.scrollWidth / 2;
    }
    requestAnimationFrame(scroll);
  }

  scroll();
}

window.onload = scrollImages;
</script>

</body>
</html>