css轮播制作教程

基础轮播结构

使用HTML创建轮播容器和图片列表，CSS设置基本样式和布局：

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</div>

.carousel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-inner img {
  width: 100%;
  flex-shrink: 0;
}

自动轮播动画

通过CSS动画实现自动轮播效果：

@keyframes slide {
  0%, 25% { transform: translateX(0); }
  30%, 55% { transform: translateX(-100%); }
  60%, 85% { transform: translateX(-200%); }
  90%, 100% { transform: translateX(0); }
}
.carousel-inner {
  animation: slide 10s infinite;
}

导航按钮控制

添加左右导航按钮并设置悬停样式：

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

指示器样式

创建底部轮播指示点：

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
  cursor: pointer;
}
.indicator.active {
  background: white;
}

响应式设计

使用媒体查询适配不同屏幕尺寸：

@media (max-width: 768px) {
  .carousel {
    width: 100%;
    height: 300px;
  }
  .carousel-btn {
    padding: 8px;
    font-size: 14px;
  }
}

完整JavaScript控制

添加交互控制功能：

document.addEventListener('DOMContentLoaded', function() {
  const inner = document.querySelector('.carousel-inner');
  const items = document.querySelectorAll('.carousel-inner img');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  const indicators = document.querySelectorAll('.indicator');

  let currentIndex = 0;

  function updateCarousel() {
    inner.style.transform = `translateX(-${currentIndex * 100}%)`;
    indicators.forEach((ind, i) => {
      ind.classList.toggle('active', i === currentIndex);
    });
  }

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % items.length;
    updateCarousel();
  });

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + items.length) % items.length;
    updateCarousel();
  });

  indicators.forEach((ind, i) => {
    ind.addEventListener('click', () => {
      currentIndex = i;
      updateCarousel();
    });
  });
});