js多行图片左右滚动

<div class="scrolling-wrapper">
  <div class="scrolling-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
</div>
<button onclick="scrollLeft()">向左滚动</button>
<button onclick="scrollRight()">向右滚动</button>

.scrolling-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scrolling-content {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

let scrollPosition = 0;
const content = document.querySelector('.scrolling-content');
const imageWidth = document.querySelector('img').clientWidth;

function scrollLeft() {
  scrollPosition -= imageWidth;
  if (scrollPosition < -(content.scrollWidth - content.clientWidth)) {
    scrollPosition = 0;
  }
  content.style.transform = `translateX(${scrollPosition}px)`;
}

function scrollRight() {
  scrollPosition += imageWidth;
  if (scrollPosition > 0) {
    scrollPosition = -(content.scrollWidth - content.clientWidth);
  }
  content.style.transform = `translateX(${scrollPosition}px)`;
}