js几张图就有几个进度条的无缝轮播

实现这个功能的方法有很多，以下是一种可能的解决方案：

1. 首先，创建一个 HTML 容器来包含进度条和图片。可以使用 CSS 样式来设置容器的大小和位置。例如：

<div class="slider-container">
  <div class="slider-progress"></div>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.slider-container {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
}
.slider-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: #f00;
  transition: width 1s ease-in-out;
}
.slider-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slider-container img:first-child {
  opacity: 1;
}

2. 在 JavaScript 中，使用 setInterval() 函数来定时更新进度条和图片。首先，获取容器和图片列表的引用，并定义一个变量来跟踪当前显示的图片的索引。例如：

const container = document.querySelector('.slider-container');
const images = container.querySelectorAll('img');
let currentIndex = 0;

3. 创建一个函数来更新进度条和图片。该函数将会在 setInterval() 中被多次调用。在该函数中，将当前显示的图片的 opacity 属性设置为 0，将下一张图片的 opacity 属性设置为 1，更新进度条的宽度，以及更新 currentIndex 变量的值。如果 currentIndex 变量大于等于图片列表的长度，将其重置为 0。例如：

function updateSlider() {
  const currentImage = images[currentIndex];
  const nextIndex = (currentIndex + 1) % images.length;
  const nextImage = images[nextIndex];
  const progress = container.querySelector('.slider-progress');

  currentImage.style.opacity = 0;
  nextImage.style.opacity = 1;
  progress.style.width = '0%';

  setTimeout(() => {
    progress.style.width = '100%';
  }, 10);

  currentIndex = nextIndex;
}

4. 在 setInterval() 中调用 updateSlider() 函数，并传入适当的时间间隔。例如：

setInterval(updateSlider, 5000);

这样，就完成了几张图就有几个进度条的无缝轮播的实现。完整代码如下：

<div class="slider-container">
  <div class="slider-progress"></div>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<style>
  .slider-container {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 0 auto;
  }
  .slider-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 5px;
    background-color: #f00;
    transition: width 1s ease-in-out;
  }
  .slider-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .slider-container img:first-child {
    opacity: 1;
  }
</style>

<script>
  const container = document.querySelector('.slider-container');
  const images = container.querySelectorAll('img');
  let currentIndex = 0;

  function updateSlider() {
    const currentImage = images[currentIndex];
    const nextIndex = (currentIndex + 1) % images.length;
    const nextImage = images[nextIndex];
    const progress = container.querySelector('.slider-progress');

    currentImage.style.opacity = 0;
    nextImage.style.opacity = 1;
    progress.style.width = '0%';

    setTimeout(() => {
      progress.style.width = '100%';
    }, 10);

    currentIndex = nextIndex;
  }

  setInterval(updateSlider, 5000);
</script>