如何实现带文本与激活标识条的轮播图滑块指示器？

给你一套完整的可运行代码，注释清晰，适配你的需求：

1. HTML 结构 #

<div class="carousel-container">
  <!-- 轮播幻灯片区域 -->
  <div class="slides">
    <div class="slide active">幻灯片 1</div>
    <div class="slide">幻灯片 2</div>
    <div class="slide">幻灯片 3</div>
    <div class="slide">幻灯片 4</div>
  </div>

  <!-- 文本指示器区域 -->
  <div class="carousel-indicators">
    <div class="indicator active">
      <span class="indicator-text">标题 1</span>
      <span class="indicator-bar"></span>
    </div>
    <div class="indicator">
      <span class="indicator-text">标题 2</span>
      <span class="indicator-bar"></span>
    </div>
    <div class="indicator">
      <span class="indicator-text">标题 3</span>
      <span class="indicator-bar"></span>
    </div>
    <div class="indicator">
      <span class="indicator-text">标题 4</span>
      <span class="indicator-bar"></span>
    </div>
  </div>
</div>

2. CSS 样式 #

/* 轮播容器基础布局 */
.carousel-container {
  width: 80%;
  margin: 20px auto;
  position: relative;
}

/* 幻灯片容器 */
.slides {
  width: 100%;
  height: 300px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
  overflow: hidden;
}

/* 单个幻灯片 */
.slide {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* 活跃幻灯片显示 */
.slide.active {
  display: flex;
}

/* 指示器容器布局 */
.carousel-indicators {
  display: flex;
  gap: 24px;
  justify-content: center;
}

/* 单个指示器 */
.indicator {
  position: relative;
  cursor: pointer;
}

/* 指示器文本样式 */
.indicator-text {
  font-size: 16px;
  color: #666;
  padding-bottom: 8px;
  display: inline-block;
}

/* 活跃状态文本样式 */
.indicator.active .indicator-text {
  color: #2c3e50;
  font-weight: 600;
}

/* 底部条形基础样式 */
.indicator-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #2c3e50;
  transition: width 0.3s ease;
}

/* 活跃状态条形展开 */
.indicator.active .indicator-bar {
  width: 100%;
}

3. JavaScript 交互逻辑 #

// 获取所有指示器和幻灯片元素
const indicators = document.querySelectorAll('.indicator');
const slides = document.querySelectorAll('.slide');

// 绑定指示器点击切换事件
indicators.forEach((indicator, index) => {
  indicator.addEventListener('click', () => {
    // 移除所有元素的活跃状态
    indicators.forEach(item => item.classList.remove('active'));
    slides.forEach(slide => slide.classList.remove('active'));

    // 给当前点击的指示器和对应幻灯片添加活跃状态
    indicator.classList.add('active');
    slides[index].classList.add('active');
  });
});

// 可选：自动轮播功能（不需要可直接删除这段）
let currentIndex = 0;
function autoSwitchSlide() {
  // 清除当前活跃状态
  indicators[currentIndex].classList.remove('active');
  slides[currentIndex].classList.remove('active');

  // 更新索引，循环切换
  currentIndex = (currentIndex + 1) % slides.length;

  // 设置新的活跃状态
  indicators[currentIndex].classList.add('active');
  slides[currentIndex].classList.add('active');
}

// 每3秒自动切换一次
setInterval(autoSwitchSlide, 3000);

自定义说明 #

• 你可以直接修改CSS里的颜色、间距、字体大小等参数，适配自己的设计风格。
• 自动轮播是可选功能，不需要的话删除JS里最后一段自动切换的代码即可。
• 所有代码都写在同一个页面里，新手直接复制就能运行，方便理解每个部分的作用。

内容的提问来源于stack exchange，提问作者Anonymous