js带文字和圆点的新闻焦点轮播图代码

以下是一个简单的文字和圆点的新闻焦点轮播图的示例代码：

HTML 代码：

<div class="slider">
  <div class="slider-wrapper">
    <div class="slider-item">
      <img src="image1.jpg" alt="Image 1">
      <div class="slider-caption">
        <h3>标题 1</h3>
        <p>描述 1</p>
      </div>
    </div>
    <div class="slider-item">
      <img src="image2.jpg" alt="Image 2">
      <div class="slider-caption">
        <h3>标题 2</h3>
        <p>描述 2</p>
      </div>
    </div>
    <div class="slider-item">
      <img src="image3.jpg" alt="Image 3">
      <div class="slider-caption">
        <h3>标题 3</h3>
        <p>描述 3</p>
      </div>
    </div>
  </div>
  <div class="slider-dots">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS 代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slider-wrapper {
  position: absolute;
  width: 300%;
  height: 100%;
  left: 0;
}
.slider-item {
  float: left;
  width: 33.333%;
  height: 100%;
}
.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}
.slider-caption h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.slider-caption p {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.slider-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
  cursor: pointer;
}
.slider-dots span.active {
  background-color: #fff;
}

JavaScript 代码：

let slideIndex = 0;
const slides = document.querySelectorAll('.slider-item');
const dots = document.querySelectorAll('.slider-dots span');

function showSlides() {
  // 隐藏所有幻灯片和圆点
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
    dots[i].classList.remove('active');
  }
  // 显示当前幻灯片和圆点
  slides[slideIndex].style.display = 'block';
  dots[slideIndex].classList.add('active');
  // 自动切换到下一张幻灯片
  slideIndex++;
  if (slideIndex >= slides.length) {
    slideIndex = 0;
  }
  // 每 3 秒自动切换
  setTimeout(showSlides, 3000);
}

// 点击圆点切换幻灯片
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    slideIndex = index;
    showSlides();
  });
});

// 自动切换幻灯片
showSlides();

说明：

- HTML 中 `.slider` 是最外层容器，`.slider-wrapper` 包含所有幻灯片，`.slider-item` 是每个幻灯片，`.slider-caption` 是幻灯片中的标题和描述，`.slider-dots` 是圆点容器。
- CSS 中使用 `position: absolute` 和 `left` 属性来实现幻灯片的滚动效果，使用 `object-fit: cover` 属性来保持幻灯片的宽高比例。
- JavaScript 中使用 `setInterval()` 函数实现自动切换幻灯片，使用 `addEventListener()` 函数实现点击圆点切换幻灯片。