有多张图片，根据左右箭头点击去切换图片，类似于轮播

假设你有三张图片，分别为 `img1.jpg`、`img2.jpg` 和 `img3.jpg`，并且有两个按钮 `prev` 和 `next`，点击这两个按钮可以切换这三张图片。你可以使用如下的前端代码实现：

HTML：

<button id="prev">上一张</button>
<button id="next">下一张</button>
<div id="images">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

CSS：

#images {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
}

#images img {
  flex-shrink: 0;
  width: 100%;
}

JavaScript：

const prev = document.getElementById("prev");
const next = document.getElementById("next");
const images = document.getElementById("images");
const imgList = images.getElementsByTagName("img");
const imgCount = imgList.length;
let currentIndex = 0;

prev.addEventListener("click", function() {
  currentIndex = (currentIndex - 1 + imgCount) % imgCount;
  images.style.transform = `translateX(${-currentIndex * 100}%)`;
});

next.addEventListener("click", function() {
  currentIndex = (currentIndex + 1) % imgCount;
  images.style.transform = `translateX(${-currentIndex * 100}%)`;
});

首先，使用 `document.getElementById` 获取按钮和图片容器的 DOM 元素，以及使用 `getElementsByTagName` 获取图片列表和图片数量。然后，定义一个变量 `currentIndex` 来记录当前显示的图片的索引，初始值为 `0`。当上一张按钮被点击时，将 `currentIndex` 减 `1`，如果 `currentIndex` 小于 `0`，则将其加上图片数量，然后根据 `currentIndex` 来计算图片容器的 `transform` 属性的值，从而实现向左滑动的效果。当下一张按钮被点击时，将 `currentIndex` 加 `1`，并根据 `currentIndex` 来计算图片容器的 `transform` 属性的值，从而实现向右滑动的效果。注意，在计算 `currentIndex` 时，使用了取模运算，这样可以实现循环切换图片的效果。另外，使用了 CSS3 的 Flexbox 布局来实现图片容器的自适应布局和水平滑动效果。