js带进度条的满屏无缝轮播

实现带进度条的满屏无缝轮播可以通过以下步骤进行：

1. 创建 HTML 结构，包括轮播容器、图片容器、图片等元素。

2. 使用 CSS 设置轮播容器和图片容器的样式，包括宽度、高度和位置等。

3. 使用 JavaScript 动态计算图片容器的宽度，并将每张图片水平排列在容器内。

4. 使用 CSS 设置图片的样式，包括宽度、高度和位置等。

5. 使用 JavaScript 实现图片轮播效果，包括图片的滑动和无缝切换。

6. 使用 JavaScript 实现进度条的效果，可以通过设置定时器来改变进度条的宽度。

下面是一个简单的示例代码，可以参考实现：

HTML：

<div class="slider">
  <div class="slider-wrapper">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
  </div>
  <div class="slider-progress"></div>
</div>

CSS：

.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
  height: 100%;
}

.slider-wrapper img {
  float: left;
  width: 33.333%;
  height: 100%;
}

.slider-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 5px;
  background-color: #f00;
  transition: width 1s ease;
}

JavaScript：

var sliderWrapper = document.querySelector('.slider-wrapper');
var sliderProgress = document.querySelector('.slider-progress');
var images = sliderWrapper.querySelectorAll('img');
var currentIndex = 0;
var progressWidth = 0;

function slide() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
    sliderWrapper.style.transition = 'none';
    sliderWrapper.style.transform = 'translateX(0%)';
    setTimeout(function() {
      sliderWrapper.style.transition = '';
      currentIndex = 1;
      sliderWrapper.style.transform = 'translateX(-33.333%)';
    }, 0);
  } else {
    sliderWrapper.style.transform = 'translateX(-' + currentIndex * 33.333 + '%)';
  }
}

var slideInterval = setInterval(slide, 3000);

setInterval(function() {
  progressWidth += 1;
  if (progressWidth > 100) {
    progressWidth = 0;
  }
  sliderProgress.style.width = progressWidth + '%';
}, 30);

以上代码实现了一个基本的带进度条的满屏无缝轮播效果，你可以根据需要进行修改和优化。