惊艳 CSS，纯CSS 创作的轮播图

纯 CSS 实现轮播图

纯 CSS 实现轮播图，是利用 CSS 的动画和过渡效果，无需使用 JavaScript，即可实现图片或内容的切换效果。以下是实现步骤：

1. 创建 HTML 结构

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="controls">
    <button class="prev-btn">Previous</button>
    <button class="next-btn">Next</button>
  </div>
</div>

2. 添加 CSS 样式

.slider {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: calc(100% * 3);
  animation: slide 15s infinite;
}

.slides img {
  width: 100%;
  height: 100%;
}

@keyframes slide {
  0% {
    margin-left: 0;
  }
  33% {
    margin-left: -100%;
  }
  66% {
    margin-left: -200%;
  }
  100% {
    margin-left: 0;
  }
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.prev-btn, .next-btn {
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
}

3. 添加 JavaScript

const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

let currentSlide = 0;

prevBtn.addEventListener('click', () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = slides.children.length - 1;
  }
  slides.style.marginLeft = `-${currentSlide * 100}%`;
});

nextBtn.addEventListener('click', () => {
  currentSlide++;
  if (currentSlide >= slides.children.length) {
    currentSlide = 0;
  }
  slides.style.marginLeft = `-${currentSlide * 100}%`;
});

以上就是实现纯 CSS 轮播图的步骤，希望对大家有所帮助。