轮播图html代码不用js

可以使用 CSS3 的动画实现轮播图效果，不需要使用 JavaScript。以下是一个简单的轮播图 HTML 代码示例：

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">
  <input type="radio" name="slider" id="slide4">
  <div class="slides">
    <div class="slide" id="slide1_content">
      <img src="slide1.jpg" alt="Slide 1">
    </div>
    <div class="slide" id="slide2_content">
      <img src="slide2.jpg" alt="Slide 2">
    </div>
    <div class="slide" id="slide3_content">
      <img src="slide3.jpg" alt="Slide 3">
    </div>
    <div class="slide" id="slide4_content">
      <img src="slide4.jpg" alt="Slide 4">
    </div>
  </div>
  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
  </div>
</div>

这个代码包含了一个 `div` 元素，其中包含了四个 `input` 元素和一个 `div` 元素。`input` 元素的 `type` 属性设置为 `radio`，这样它们可以用来选择轮播图的每个幻灯片。`div` 元素的 `class` 属性设置为 `slides`，这是轮播图的容器，包含了每个幻灯片的内容。

CSS 代码如下：

.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
}
.slides {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  transition: transform 1s ease-in-out;
}
.slide {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.controls label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.controls label:hover {
  background-color: #555;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .slides {
  transform: translateX(-25%);
}
#slide2:checked + .slides {
  transform: translateX(-50%);
}
#slide3:checked + .slides {
  transform: translateX(-75%);
}
#slide4:checked + .slides {
  transform: translateX(-100%);
}

这个 CSS 代码使用了 Flexbox 布局和 CSS3 动画来实现轮播图效果。每个幻灯片都是一个 `div` 元素，包含了一个图片。`.slider` 元素的 `height` 属性可以根据需要进行调整，以适应不同的轮播图高度。

`.slides` 元素使用 `display: flex` 属性将幻灯片水平排列，并使用 `transition` 属性设置动画效果。`.slide` 元素的 `flex` 属性设置为 1，使其自动填充轮播图容器的宽度。`.slide img` 元素使用 `object-fit: cover` 属性保持图片比例不变，并填充整个幻灯片。

`.controls` 元素用于显示幻灯片控制按钮。每个按钮都是一个 `label` 元素，当用户悬停在按钮上时，其背景颜色会变为深灰色。最后，使用 `input[type="radio"]:checked + .slides` 选择器来控制幻灯片的显示，根据 `input` 元素的 `checked` 属性选择相应的幻灯片。