不用js怎么做轮播图

不用JS怎么做轮播图：使用CSS动画、使用CSS伪类、利用CSS的:target伪类、结合HTML的input标签和CSS的:checked伪类。通过CSS动画，你可以实现图像的自动轮播；而使用CSS伪类，如:target和:checked，可以实现用户点击切换的效果。

一、使用CSS动画

CSS动画是一种非常强大的工具，它可以帮助我们实现无需JavaScript的轮播图。通过@keyframes定义动画，然后在CSS中应用这些动画，就可以实现图像的自动轮播。

1.1 定义关键帧动画

首先，我们需要定义一个关键帧动画。在这个动画中，我们将指定图像的透明度或位置，以实现轮播效果。

@keyframes slide {
  0% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes slide2 {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

1.2 应用动画

接下来，我们将这个动画应用到轮播图的每个图像上。

.slides img:nth-child(1) {
  animation: slide 10s infinite;
}
.slides img:nth-child(2) {
  animation: slide2 10s infinite;
}

1.3 HTML结构

最后，我们需要一个HTML结构来容纳这些图像。

<div class="slides">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

二、使用CSS伪类

CSS伪类也是实现轮播图的有效方法。通过使用:target伪类和:checked伪类，我们可以实现用户点击切换的效果。

2.1 使用:target伪类

我们可以使用HTML的锚点和CSS的:target伪类来实现轮播图。

<div class="slides">
  <div id="slide1">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div id="slide2">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <a href="#slide1">Slide 1</a>
  <a href="#slide2">Slide 2</a>
</div>

然后，在CSS中使用:target伪类来显示对应的图像。

.slides div {
  display: none;
}
.slides div:target {
  display: block;
}

2.2 使用:checked伪类和input标签

另一种方法是结合HTML的input标签和CSS的:checked伪类。

<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<div class="slides">
  <div class="slide slide1">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide slide2">
    <img src="image2.jpg" alt="Image 2">
  </div>
</div>
<label for="slide1">Slide 1</label>
<label for="slide2">Slide 2</label>

在CSS中，我们使用:checked伪类来显示对应的图像。

.slides .slide {
  display: none;
}
#slide1:checked ~ .slides .slide1,
#slide2:checked ~ .slides .slide2 {
  display: block;
}

三、结合CSS和HTML实现复杂效果

通过结合以上方法，我们可以实现更加复杂和多样的轮播图效果。

3.1 自动和手动结合

我们可以将CSS动画与:checked伪类结合起来，实现自动和手动控制的轮播图。

<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<div class="slides">
  <div class="slide slide1">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide slide2">
    <img src="image2.jpg" alt="Image 2">
  </div>
</div>
<label for="slide1">Slide 1</label>
<label for="slide2">Slide 2</label>

在CSS中，我们将自动动画和手动切换结合起来。

@keyframes slide {
  0% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
.slides .slide {
  display: none;
}
#slide1:checked ~ .slides .slide1,
#slide2:checked ~ .slides .slide2 {
  display: block;
}
.slides .slide1 {
  animation: slide 10s infinite;
}
.slides .slide2 {
  animation: slide2 10s infinite;
}

四、优化和扩展

在实际使用中，我们还可以对轮播图进行优化和扩展。这里有几个建议：

4.1 响应式设计

通过使用媒体查询，我们可以使轮播图在不同设备上显示效果良好。

@media (max-width: 600px) {
  .slides img {
    width: 100%;
  }
}

4.2 添加过渡效果

为了使轮播图看起来更加平滑，我们可以添加过渡效果。

.slides img {
  transition: opacity 1s ease-in-out;
}

4.3 支持更多图像

通过添加更多的input标签和CSS规则，我们可以支持更多的图像。

<input type="radio" name="slider" id="slide3">
<div class="slide slide3">
  <img src="image3.jpg" alt="Image 3">
</div>
<label for="slide3">Slide 3</label>

#slide3:checked ~ .slides .slide3 {
  display: block;
}
.slides .slide3 {
  animation: slide3 10s infinite;
}

五、综合实例

最后，我们将所有内容综合起来，展示一个完整的实例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS轮播图示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .slides {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: auto;
      overflow: hidden;
    }
    .slides img {
      width: 100%;
      display: none;
    }
    input[type="radio"] {
      display: none;
    }
    .slides img:first-child {
      display: block;
    }
    @keyframes slide {
      0% { opacity: 1; }
      20% { opacity: 0; }
      100% { opacity: 0; }
    }
    @keyframes slide2 {
      0% { opacity: 0; }
      20% { opacity: 1; }
      100% { opacity: 0; }
    }
    .slides img:nth-child(1) {
      animation: slide 10s infinite;
    }
    .slides img:nth-child(2) {
      animation: slide2 10s infinite;
    }
    #slide1:checked ~ .slides img:nth-child(1),
    #slide2:checked ~ .slides img:nth-child(2) {
      display: block;
    }
    label {
      cursor: pointer;
      padding: 10px;
      background: #ddd;
      margin: 5px;
      display: inline-block;
    }
    @media (max-width: 600px) {
      .slides img {
        width: 100%;
      }
    }
    .slides img {
      transition: opacity 1s ease-in-out;
    }
  </style>
</head>
<body>
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <label for="slide1">Slide 1</label>
  <label for="slide2">Slide 2</label>
</body>
</html>

通过上述代码，我们实现了一个无需JavaScript的轮播图。这个轮播图不仅支持自动播放，还支持用户手动切换。通过合理使用CSS动画和伪类，我们可以实现非常丰富的效果。如果你需要在项目团队中协作开发这种功能，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这将帮助你更有效率地管理和实现项目功能。