# 纯CSS制作轮播图

By [an7](https://paragraph.com/@myairdrop) · 2022-04-19

---

原理：
---

通过label控制type为radio的input中的checked属性，当对应位置的radiochecked时，做出相应动作，动作为将轮播图片进行位移到可见区域进行展示。
--------------------------------------------------------------------------------------

HTML代码

    <ul class="slides">
      <input type="radio" id="control-1" name="control" checked>
      <input type="radio" name="control" id="control-2">
      <input type="radio" name="control" id="control-3">
      注释：此input用来提供checked用于逻辑判断
      <li class="slide">1</li>
      <li class="slide">2</li>
      <li class="slide">3</li>
      注释：此li为模拟图片展示
      <div class="controls-visible">
        <label for="control-1"></label>
        <label for="control-2"></label> 
        <label for="control-3"></label>
      注释：此label通过for属性关联对应的input，实现点击label切换对应input的checked
      </div>
    </ul>
    

CSS代码

    body{
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:100vh;
    }
    ul.slides{
      position:relative;
      width:600px;
      height:280px;
      list-style:none;
      margin:0;
      padding:0;
      background-color:#eee;
      overflow:hidden
    }
    li.slide{
      margin:0;
      padding:0;
      width:inherit;
      height:inherit;
      position:absolute;
      top:0;
      left:0;
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:123px;
      color:white;
      transition:0.5s transform ease-in-out;
    }
    注释：创建三个不同背景色同样大小的区块并排，模拟轮播图片
    .slide:nth-of-type(1){
      background-color:yellow;
    }
    .slide:nth-of-type(2){
      background-color:red;
      left:100%
    }
    .slide:nth-of-type(3){
      background-color:blue;
      left:200%
    }
    input[type="radio"]{
      position:relative;
      z-index:100;
      display:none;
    }
    .controls-visible{
      position:absolute;
      width:100%;
      bottom:12px;
      text-align:center;
    }
    .controls-visible label{
      display:inline-block;
      width:10px;
      height:10px;
      background-color:white;
      border-radius:50%;
      margin:0 3px;
      border:2px solid #fff;
    }
    .slides input[type="radio"]:nth-of-type(1):checked ~ .controls-visible label:nth-of-type(1){
      background-color:gray;
    }
    .slides input[type="radio"]:nth-of-type(2):checked ~ .controls-visible label:nth-of-type(2){
      background-color:green;
    }
    .slides input[type="radio"]:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3){
      background-color:pink;
    }
    
    .slides input[type="radio"]:nth-of-type(1):checked ~ .slide{
      transform:translatex(0%)
    }
    .slides input[type="radio"]:nth-of-type(2):checked ~ .slide{
      transform:translatex(-100%)
    }
    注释：当第二个radio被checked时，将li往左移一格
    .slides input[type="radio"]:nth-of-type(3):checked ~ .slide{
      transform:translatex(-200%)
    }
    注释：当第二个radio被checked时，将li往左移一格
    

演示地址：

[https://codepen.io/xbox366/pen/KKZbqWj](https://codepen.io/xbox366/pen/KKZbqWj)

---

*Originally published on [an7](https://paragraph.com/@myairdrop/css)*