html+css+js实现图片轮播，并在图片两端有向左和向右的图标，同时最下方显示几个图片的缩略图

这里提供一种基于 HTML、CSS 和 JavaScript 的图片轮播实现方式，同时包括向左和向右图标、缩略图等功能。

HTML 代码：

<div class="slider-wrap">
  <div class="slider-items">
    <img src="image1.jpg" alt="image1">
    <img src="image2.jpg" alt="image2">
    <img src="image3.jpg" alt="image3">
    <img src="image4.jpg" alt="image4">
  </div>
  <div class="slider-nav">
    <div class="slider-prev">&lt;</div>
    <div class="slider-next">&gt;</div>
    <div class="slider-thumbnails">
      <img src="image1.jpg" alt="image1">
      <img src="image2.jpg" alt="image2">
      <img src="image3.jpg" alt="image3">
      <img src="image4.jpg" alt="image4">
    </div>
  </div>
</div>

CSS 代码：

.slider-wrap {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider-items {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slider-items img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.slider-prev,
.slider-next {
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

.slider-thumbnails {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}

.slider-thumbnails img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin: 0 10px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;
}

.slider-thumbnails img.active {
  opacity: 1;
}

JavaScript 代码：

const sliderWrap = document.querySelector('.slider-wrap');
const sliderItems = document.querySelector('.slider-items');
const sliderPrev = document.querySelector('.slider-prev');
const sliderNext = document.querySelector('.slider-next');
const sliderThumbnails = document.querySelectorAll('.slider-thumbnails img');

let currentIndex = 0;
const slideCount = sliderItems.children.length;

// 初始化缩略图
sliderThumbnails[currentIndex].classList.add('active');

// 向左滑动
function slideToPrev() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = slideCount - 1;
  }
  updateSlider();
}

// 向右滑动
function slideToNext() {
  currentIndex++;
  if (currentIndex >= slideCount) {
    currentIndex = 0;
  }
  updateSlider();
}

// 更新轮播图和缩略图
function updateSlider() {
  sliderItems.style.transform = `translateX(-${currentIndex * 100}%)`;
  sliderThumbnails.forEach((thumbnail, index) => {
    if (index === currentIndex) {
      thumbnail.classList.add('active');
    } else {
      thumbnail.classList.remove('active');
    }
  });
}

// 绑定事件
sliderPrev.addEventListener('click', slideToPrev);
sliderNext.addEventListener('click', slideToNext);
sliderThumbnails.forEach((thumbnail, index) => {
  thumbnail.addEventListener('click', () => {
    currentIndex = index;
    updateSlider();
  });
});

解释一下上面的代码：

- `slider-wrap` 是整个轮播图的容器，设为 `position: relative` 并设置宽度和高度。
- `slider-items` 是轮播图的内容，设为 `position: absolute` 并设置宽度和高度，使用 `flex` 布局实现图片横排，并使用 `transition` 属性实现平滑滑动效果。
- `slider-nav` 是轮播图的导航，包括向左、向右的图标和缩略图，设为 `position: absolute` 并设置宽度和底部位置。
- `slider-prev` 和 `slider-next` 是向左和向右的图标，设为可点击的 `cursor: pointer`。
- `slider-thumbnails` 是缩略图的容器，使用 `flex` 布局实现水平居中显示。
- `slider-thumbnails img` 是每个缩略图，设为固定宽高、可点击的 `cursor: pointer`，并添加 `active` 类来表示当前轮播图对应的缩略图。

在 JavaScript 中，使用 `querySelector` 和 `querySelectorAll` 分别获取需要用到的 DOM 元素，然后定义 `currentIndex` 表示当前轮播图的索引，`slideCount` 表示轮播图的数量。

`slideToPrev` 和 `slideToNext` 分别表示向左和向右滑动，更新 `currentIndex` 值并调用 `updateSlider` 函数来更新轮播图和缩略图。

`updateSlider` 函数中使用 `transform` 属性来实现轮播图的平滑滑动，使用 `forEach` 方法来遍历所有缩略图，并根据当前轮播图的索引来判断是否需要添加 `active` 类来表示当前缩略图。

最后，使用 `addEventListener` 方法来绑定事件，使得用户可以通过点击向左、向右的图标或缩略图来切换轮播图。