css实现自动轮播图

/* CSS实现自动轮播图 */

/* 设置轮播容器 */
.carousel {
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden;
}

/* 设置轮播图片容器 */
.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* 每张图片的样式 */
.carousel-item {
  min-width: 100%;
  height: 100%;
}

/* 设置轮播控制按钮 */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

/* 设置轮播指示器 */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  background-color: gray;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.carousel-indicator.active {
  background-color: white;
}

/* JavaScript 实现自动轮播 */
<script>
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const totalItems = items.length;

function showNextItem() {
  currentIndex = (currentIndex + 1) % totalItems;
  const offset = -currentIndex * 100;
  document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
}

setInterval(showNextItem, 3000); // 每3秒切换一次图片
</script>

解释说明：

1. HTML 结构：

   • .carousel 是轮播图的容器。
   • .carousel-inner 包含所有轮播项（.carousel-item），这些项是每一张图片或内容块。
   • .carousel-control 是用于手动控制轮播的按钮（前后切换）。
   • .carousel-indicators 是用于显示当前轮播位置的指示器。

2. CSS 样式：

   • 使用 flex 布局来水平排列所有的轮播项。
   • 使用 transition 属性来实现平滑的动画效果。
   • 使用 position: absolute 来定位控制按钮和指示器。

3. JavaScript 功能：

   • 使用 setInterval 函数每隔 3 秒自动切换到下一张图片。
   • 通过修改 .carousel-inner 的 transform 属性来实现图片的水平移动。