用js实现两个按钮控制一张图片,点击左侧按钮,第一张图往右走,点击右侧按钮,切换成第二张图往左走

你可以使用以下代码实现这个功能：

HTML代码：

<div>
  <button id="prevBtn">上一张</button>
  <button id="nextBtn">下一张</button>
</div>
<img id="image" src="image1.jpg">

CSS代码：

#image {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}

JavaScript代码：

const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
const image = document.getElementById("image");
let currentImage = 1;

prevBtn.addEventListener("click", () => {
  if (currentImage === 1) {
    return;
  }
  currentImage--;
  image.style.transform = `translateX(${(currentImage - 1) * -100}%)`;
});

nextBtn.addEventListener("click", () => {
  if (currentImage === 2) {
    return;
  }
  currentImage++;
  image.style.transform = `translateX(${(currentImage - 1) * -100}%)`;
});

我们首先获取了三个元素：两个按钮和图片。然后我们定义了一个变量currentImage，用于记录当前显示的图片。prevBtn和nextBtn分别绑定了点击事件监听器。当我们点击它们时，我们会检查currentImage的值，并根据情况更新它。最后，我们使用CSS的transform属性来移动图片。我们使用translateX函数来指定图片应该沿着X轴移动的距离。我们使用currentImage的值来计算移动距离。例如，如果currentImage等于2，则图片将向左移动200％（即两张图片的宽度）。