纯html+css轮播图代码

以下是纯HTML和CSS实现的轮播图代码：

HTML代码：

<div class="slideshow-container">
  <input type="radio" name="slide" id="slide1" checked>
  <input type="radio" name="slide" id="slide2">
  <input type="radio" name="slide" id="slide3">
  <div class="slideshow">
    <div class="slide">
      <img src="img1.jpg">
    </div>
    <div class="slide">
      <img src="img2.jpg">
    </div>
    <div class="slide">
      <img src="img3.jpg">
    </div>
  </div>
  <div class="nav">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

CSS代码：

.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}
.slideshow {
  display: flex;
  overflow: hidden;
}
.slide {
  flex: 1;
  width: 100%;
  transition: all 1s ease;
}
.slide img {
  width: 100%;
}
.nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.nav label {
  cursor: pointer;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
}
.nav label:hover {
  background-color: #555;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .slideshow .slide {
  width: 0;
}
input[type="radio"]:checked + .slideshow .slide:nth-of-type(1) {
  width: 100%;
}
input[type="radio"]:checked + .slideshow .slide:nth-of-type(2) {
  width: 100%;
}
input[type="radio"]:checked + .slideshow .slide:nth-of-type(3) {
  width: 100%;
}
input[type="radio"]:checked + .nav label {
  background-color: #555;
}

这个轮播图的实现方式是通过使用radio和label元素来实现的。HTML代码中的input元素用于定义轮播图的切换按钮，label元素用于定义按钮的样式。CSS代码中的.nav类用于定义按钮容器的样式，其中transform属性被设置为translateX(-50%)以实现水平居中。radio元素的:checked伪类被用于控制轮播图的显示，其中:nth-of-type()伪类用于控制每个轮播图的显示方式。