利用CSS让Banner轮播图转起来

2023-12-20 20:33:27

好的轮播图不仅美观，还能给用户良好的体验。尽管一些脚本语言也能轻松构建轮播图，但借助CSS样式也能达到同样的效果。这种纯CSS轮播图主要依赖HTML中的<div>元素和CSS中的<animation>属性。通过轮流显示图片，轮播图就能实现图片切换效果。

HTML代码

HTML代码用于创建轮播图的容器及其内部组件。主要涉及的元素有<ul>（无序列表）和<li>（列表项）。

<div class="slider">
  <ul class="slider-list">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
  </ul>
  <div class="slider-nav">
    <button class="slider-prev">&#10094;</button>
    <button class="slider-next">&#10095;</button>
  </div>
  <ul class="slider-dots">
    <li class="slider-dot active"></li>
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
  </ul>
</div>

CSS代码

CSS代码定义轮播图的样式和动画。关键之处在于使用<animation>属性创建幻灯片效果，以及使用<transition>属性创建平滑的过渡效果。

.slider {
  width: 100%;
  height: 500px;
  position: relative;
}

.slider-list {
  position: relative;
  display: flex;
  animation: slide 20s infinite;
}

.slider-list li {
  width: 100%;
  height: 100%;
}

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

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.slider-prev, .slider-next {
  border: none;
  background: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.slider-prev {
  left: 0;
}

.slider-next {
  right: 0;
}

.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  opacity: 0.5;
  cursor: pointer;
}

.slider-dot.active {
  opacity: 1;
}