js左右滚动图片代码

以下是一个使用 JavaScript 实现左右滚动图片的简单示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片左右滚动</title>
  <style>
    #scrollDiv {
      width: 300px;
      height: 100px;
      overflow: hidden;
      position: relative;
    }

    #scrollContent {
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      transition: left 0.5s;
    }

    #scrollContent img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div id="scrollDiv">
    <div id="scrollContent">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.jpg" alt="Image 2">
      <img src="image3.jpg" alt="Image 3">
      <img src="image4.jpg" alt="Image 4">
    </div>
  </div>
  <button onclick="scrollLeft()">向左滚动</button>
  <button onclick="scrollRight()">向右滚动</button>

  <script>
    let scrollAmount = 0;
    const scrollContent = document.getElementById('scrollContent');
    const scrollDiv = document.getElementById('scrollDiv');
    const imageWidth = 100; // 每张图片的宽度（包括间距）

    function scrollLeft() {
      if (scrollAmount < 0) {
        scrollAmount += imageWidth;
        scrollContent.style.left = scrollAmount + 'px';
      }
    }

    function scrollRight() {
      if (scrollAmount > -(scrollContent.children.length - 1) * imageWidth) {
        scrollAmount -= imageWidth;
        scrollContent.style.left = scrollAmount + 'px';
      }
    }
  </script>
</body>

</html>

基础概念：