css中带进度条的轮播图

CSS中带进度条的轮播图是一种非常流行的界面效果，它能够让用户更清晰地知道轮播图中每个元素的展示时间和位置。下面我们就来学习一下如何实现这样一个效果。

/* 接下来是 CSS 代码 */

.slider-container {
  /* 设置轮播图容器的样式 */
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.slider-container .slider-wrapper {
  /* 设置轮播图外层容器的样式 */
  display: flex;
  width: 300%;
  height: 100%;
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

.slider-container .slider-item {
  /* 设置轮播图项的样式 */
  width: 33.3333%;
  height: 100%;
  background-color: #ccc;
  flex-shrink: 0;
  position: relative;
}

.slider-container .slider-item img {
  /* 设置轮播图元素的样式 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-container .slider-progress-bar {
  /* 设置进度条的样式 */
  height: 5px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #ddd;
}

.slider-container .slider-progress-bar .slider-progress {
  /* 设置进度条递进的样式 */
  height: 100%;
  width: 0;
  background-color: #ff5722;
}

/* 接下来是 JS 代码 */

const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderItems = document.querySelectorAll('.slider-item');
const progressBar = document.querySelector('.slider-progress');

let index = 0;
let inProgress = false;

function nextSlide() {
  if (!inProgress) {
    inProgress = true;
    index++;
    if (index >= sliderItems.length) {
      index = 0;
    }
    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
    sliderWrapper.style.transform = `translateX(-${index * 100 / 3}%)`;
    progressBar.style.width = '0';
    setTimeout(() => {
      inProgress = false;
      progressBar.style.transition = 'width 5s linear';
      progressBar.style.width = '100%';
    }, 500);
  }
}

setInterval(nextSlide, 5000); 

以上就是带进度条的轮播图的全部代码，通过这段代码，我们可以轻松地实现一个具有进度条样式的轮播图，并控制它的轮播速度和动画方式。