CSS 实现带有上下按钮的仅使用CSS的幻灯片播放器/旋转木马

在本文中，我们将介绍如何使用纯CSS实现一个带有上下按钮的幻灯片播放器/旋转木马。这将使我们能够在网页中展示一系列图片或内容，并通过按钮来切换它们。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

CSS结构和布局

首先，我们需要为幻灯片播放器创建所需的基本结构和布局。我们将使用一个包含幻灯片容器的div元素，并将每个幻灯片放在一个独立的div中。这将使我们能够通过切换幻灯片的显示和隐藏来实现幻灯片播放效果。

<div class="slideshow-container">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

接下来，我们将为幻灯片容器和每个幻灯片添加样式。我们可以使用CSS选择器来针对特定的元素添加样式。

.slideshow-container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active {
  opacity: 1;
}

在上面的代码中，我们将幻灯片容器设置为100%宽度和固定高度，并将其位置设置为相对定位。我们还将设置溢出隐藏来隐藏超出容器尺寸的幻灯片。每个幻灯片都设置为相对于容器绝对定位，并且最初的不透明度为0，使其隐藏。我们还为幻灯片的切换添加了过渡效果。

幻灯片切换效果

为了实现幻灯片的切换效果，我们需要使用CSS动画和伪类选择器。我们将使用:checked伪类选择器来检查按钮的状态，并根据其状态来切换幻灯片。

<input id="slide1" type="radio" name="slides" checked>
<input id="slide2" type="radio" name="slides">
<input id="slide3" type="radio" name="slides">

<div class="slideshow-container">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked ~ .slideshow-container .slide.active {
  opacity: 0;
}

input[type="radio"]:checked ~ .slideshow-container .slide {
  opacity: 1;
}

input[type="radio"]:checked ~ .slideshow-container .slide:nth-of-type(1) {
  animation: slide1 6s infinite;
}

input[type="radio"]:checked ~ .slideshow-container .slide:nth-of-type(2) {
  animation: slide2 6s infinite;
}

input[type="radio"]:checked ~ .slideshow-container .slide:nth-of-type(3) {
  animation: slide3 6s infinite;
}

@keyframes slide1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  53% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide2 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide3 {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

在上面的代码中，我们为每个幻灯片创建了一个相应的radio输入元素，并使用label元素将其与幻灯片容器关联起来。每个radio输入元素的:checked状态将决定哪个幻灯片是可见的。

使用:checked伪类选择器，我们可以根据其状态来切换幻灯片的透明度。我们还使用动画和关键帧来为每个幻灯片设置切换效果。切换效果的动画将在幻灯片容器中循环播放。

上下按钮

最后，我们需要添加上下按钮，以便用户可以手动切换幻灯片。我们将使用CSS伪元素和绝对定位来创建这些按钮。

<div class="slideshow-container">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <label class="prev" for="slide3"></label>
  <label class="next" for="slide2"></label>
</div>

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.prev {
  left: 15px;
}

.next {
  right: 15px;
}

在上面的代码中，我们添加了两个label元素作为上下按钮，并为它们添加了prev和next类。我们使用绝对定位将这些按钮放置在幻灯片容器的上方，并使用transform属性使其居中对齐。我们还为按钮添加了一些基本的样式，如背景颜色、文本颜色和鼠标指针样式。

示例

下面是一个完整的示例，展示了如何使用CSS实现一个带有上下按钮的幻灯片播放器/旋转木马：

<style>
  .slideshow-container {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
  }

  .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .slide.active {
    opacity: 1;
  }

  input[type="radio"] {
    display: none;
  }

  input[type="radio"]:checked ~ .slideshow-container .slide.active {
    opacity: 0;
  }

  input[type="radio"]:checked ~ .slideshow-container .slide {
    opacity: 1;
  }

  input[type="radio"]:checked ~ .slideshow-container .slide:nth-of-type(1) {
    animation: slide1 6s infinite;
  }

  input[type="radio"]:checked ~ .slideshow-container .slide:nth-of-type(2) {
    animation: slide2 6s infinite;
  }

  input[type="radio"]:checked ~ .slideshow-container .slide:nth-of-type(3) {
    animation: slide3 6s infinite;
  }

  @keyframes slide1 {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    33% {
      opacity: 1;
    }
    53% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes slide2 {
    0% {
      opacity: 0;
    }
    33% {
      opacity: 0;
    }
    45% {
      opacity: 1;
    }
    66% {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes slide3 {
    0% {
      opacity: 0;
    }
    66% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }

  .prev,
  .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }

  .prev {
    left: 15px;
  }

  .next {
    right: 15px;
  }
</style>

<div class="slideshow-container">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <label class="prev" for="slide3"></label>
  <label class="next" for="slide2"></label>
</div>

<input id="slide1" type="radio" name="slides" checked>
<input id="slide2" type="radio" name="slides">
<input id="slide3" type="radio" name="slides">

<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>

在上面的示例中，我们使用了上述提到的CSS样式、HTML结构和布局来创建一个带有幻灯片切换效果和上下按钮的幻灯片播放器/旋转木马。你可以根据自己的需要调整样式和内容，以满足特定的网页设计要求。