无插件纯CSS实现图片轮播，视觉新体验，你值得拥有！

2023-11-02 16:47:46

使用纯CSS实现的华丽图片轮播

想要为你的网站增添一抹亮色吗？不如试试图片轮播吧！它不仅可以展示更多图片内容，还可以让你的网站更加生动有趣。借助纯CSS，你无需任何插件或框架，就能轻松实现图片轮播。

第一步：图片准备

准备好你想要展示的图片。图片格式不限，但建议使用尺寸和比例相同的图片，以确保轮播效果美观。

第二步：创建HTML代码

新建一个HTML文件，并添加以下代码：

<div class="carousel">
  <ul class="carousel-inner">
    <li class="carousel-item active">
      <img src="image1.jpg" alt="Image 1">
    </li>
    <li class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </li>
    <li class="carousel-item">
      <img src="image3.jpg" alt="Image 3">
    </li>
  </ul>
</div>

第三步：创建CSS代码

新建一个CSS文件，并添加以下代码：

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

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-item {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
}

.carousel-item.active {
  display: block;
}

第四步：添加动画效果

为图片轮播增添动画效果，让它更具动态感。添加以下CSS代码：

.carousel-item {
  animation: fade 1s ease-in-out infinite alternate;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

第五步：添加导航按钮

让用户可以手动控制图片轮播，添加以下HTML代码：

<button class="carousel-control-prev" onclick="prev()">Previous</button>
<button class="carousel-control-next" onclick="next()">Next</button>

添加以下JavaScript代码：

function prev() {
  var current = document.querySelector('.carousel-item.active');
  var prev = current.previousElementSibling;
  if (prev) {
    prev.classList.add('active');
    current.classList.remove('active');
  }
}

function next() {
  var current = document.querySelector('.carousel-item.active');
  var next = current.nextElementSibling;
  if (next) {
    next.classList.add('active');
    current.classList.remove('active');
  }
}