五张图图片轮播六个li小点跟随的JavaScript代码

以下是一个基本的五张图片轮播，带有六个li小点跟随的JavaScript代码：

HTML代码：

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <img src="img4.jpg" alt="Image 4">
    <img src="img5.jpg" alt="Image 5">
  </div>
  <ul class="carousel-dots">
    <li class="dot active"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
</div>

CSS代码：

.carousel-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.carousel-slide {
  display: flex;
  width: 500%;
  height: 100%;
}
.carousel-slide img {
  width: 20%;
  height: 100%;
  object-fit: cover;
}
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-dots .dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.carousel-dots .dot.active {
  background-color: #333;
}

JavaScript代码：

const slide = document.querySelector('.carousel-slide');
const images = document.querySelectorAll('.carousel-slide img');
const dots = document.querySelectorAll('.dot');

// 设置初始值
let currentSlide = 1;
let slideWidth = images[0].clientWidth;

// 设置初始图片位置
slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`;

// 添加小点的点击事件
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    currentSlide = index + 1;
    updateSlide();
  });
});

// 自动轮播
setInterval(() => {
  currentSlide++;
  updateSlide();
}, 5000);

// 更新图片和小点的状态
function updateSlide() {
  // 更新图片位置
  slide.style.transition = "transform 0.3s ease-in-out";
  slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`;

  // 更新小点状态
  dots.forEach(dot => dot.classList.remove('active'));
  dots[currentSlide - 1].classList.add('active');

  // 监听过渡完成事件，避免动画闪烁
  slide.addEventListener('transitionend', () => {
    if (images[currentSlide].id === 'first') {
      slide.style.transition = "none";
      currentSlide = 1;
      slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`;
    } else if (images[currentSlide].id === 'last') {
      slide.style.transition = "none";
      currentSlide = images.length - 2;
      slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`;
    }
  });
}

说明：

1. HTML代码中，`<div class="carousel-container">`是轮播容器，包含图片和小点；`<div class="carousel-slide">`是图片容器，包含五张图片；`<ul class="carousel-dots">`是小点容器，包含六个小点。
2. CSS代码中，`.carousel-container`是轮播容器的样式，设置了容器的宽高、位置和溢出隐藏；`.carousel-slide`是图片容器的样式，设置了图片容器的宽高和图片的宽高；`.carousel-dots`是小点容器的样式，设置了小点容器的位置和样式。这里使用了Flex布局。
3. JavaScript代码中，首先获取了图片容器、所有图片和所有小点的元素；然后设置了初始值和初始图片位置；接着添加了小点的点击事件和自动轮播的定时器；最后编写了更新图片和小点状态的函数。在更新图片位置时，使用了CSS3过渡实现动画效果；在更新小点状态时，使用了`classList`属性和`active`类名实现样式切换；在监听过渡完成事件时，使用了`transitionend`事件实现无缝滚动。