css轮转图制作

轮转图的基本结构

轮转图（Carousel）通常由外层容器、图片列表和导航按钮组成。HTML结构如下：

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev-btn">❮</button>
  <button class="next-btn">❯</button>
</div>

基础CSS样式

设置轮转图容器为相对定位，限制宽度并隐藏溢出内容：

.carousel-container {
  position: relative;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  width: 100%;
  height: 400px;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

导航按钮样式

为前后导航按钮添加样式，使其悬浮在图片上方：

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

添加过渡效果

使用CSS过渡实现平滑的滑动效果：

.carousel-slide {
  transition: transform 0.5s ease-in-out;
}

指示器样式（可选）

添加底部小圆点指示当前幻灯片位置：

<div class="carousel-indicators">
  <span class="indicator active"></span>
  <span class="indicator"></span>
  <span class="indicator"></span>
</div>

.carousel-indicators {
  text-align: center;
  padding: 10px;
}

.indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.indicator.active {
  background-color: #717171;
}

自动轮播实现

通过JavaScript设置定时器实现自动轮播：

let currentIndex = 0;
const slides = document.querySelectorAll('.carousel-slide img');
const totalSlides = slides.length;

function nextSlide() {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateCarousel();
}

function updateCarousel() {
  document.querySelector('.carousel-slide').style.transform = 
    `translateX(-${currentIndex * 100}%)`;

  // 更新指示器状态
  document.querySelectorAll('.indicator').forEach((dot, index) => {
    dot.classList.toggle('active', index === currentIndex);
  });
}

// 设置自动轮播
let interval = setInterval(nextSlide, 3000);

// 鼠标悬停暂停轮播
document.querySelector('.carousel-container').addEventListener('mouseenter', () => {
  clearInterval(interval);
});

// 鼠标离开恢复轮播
document.querySelector('.carousel-container').addEventListener('mouseleave', () => {
  interval = setInterval(nextSlide, 3000);
});

响应式设计

添加媒体查询确保在不同设备上正常显示：

@media (max-width: 768px) {
  .carousel-slide {
    height: 300px;
  }

  .prev-btn, .next-btn {
    padding: 10px;
  }
}