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