.放一张图片，左边右边各一按钮，点击左边上一张图片，右边就显示 下一张图片

好的，这是一个很常见的图片轮播的需求，下面是示例代码：

HTML部分：

<div class="image-slider">
  <div class="slider-left"><button>&lt;</button></div>
  <div class="slider-right"><button>&gt;</button></div>
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS部分：

.image-slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.image-container {
  position: absolute;
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.image-container img {
  width: 33.33%;
  height: 100%;
  object-fit: cover;
}
.slider-left,
.slider-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.slider-left button,
.slider-right button {
  font-size: 2rem;
  padding: 0.5rem 1rem;
}
.slider-left button {
  float: left;
}
.slider-right button {
  float: right;
}

JavaScript部分：

const sliderLeft = document.querySelector('.slider-left');
const sliderRight = document.querySelector('.slider-right');
const imageContainer = document.querySelector('.image-container');
const images = document.querySelectorAll('.image-container img');
let imageIndex = 0;
let translateX = 0;

sliderLeft.addEventListener('click', () => {
  if (imageIndex === 0) {
    imageIndex = images.length - 1;
    translateX = -100 * (images.length - 1);
  } else {
    imageIndex--;
    translateX += 100;
  }
  imageContainer.style.transform = `translateX(${translateX}%)`;
});

sliderRight.addEventListener('click', () => {
  if (imageIndex === images.length - 1) {
    imageIndex = 0;
    translateX = 0;
  } else {
    imageIndex++;
    translateX -= 100;
  }
  imageContainer.style.transform = `translateX(${translateX}%)`;
});

代码解释：

1. HTML部分：我们定义了一个容器，里面包含了左右两个按钮和图片容器。图片容器里面包含了三张图片，这里可以根据需要改变图片的数量。
2. CSS部分：我们定义了容器的大小和样式，图片容器使用了绝对定位，并且使用了flex布局。图片使用了object-fit属性，可以调整图片的填充方式。左右按钮使用了绝对定位，并且使用了浮动布局。
3. JavaScript部分：我们首先获取左右按钮和图片容器，并且定义了图片的索引和translateX的值。当点击左右按钮时，我们判断当前的图片索引和容器的translateX值，然后根据需要设置新的图片索引和translateX值，最后使用style.transform属性来改变图片容器的位置。

这个代码可以实现最基本的图片轮播效果，你可以根据需要进行修改和定制。