<div class="box">  

  <div class="img-box">
    <div class="img img1" id="img1"></div>
    <div class="img img2" id="img2"></div>
    <div class="img img3" id="img3"></div>  
  </div>
  
  <div class="dot">
    <a href="#img1"><span></span></a>
    <a href="#img2"><span></span></a>
    <a href="#img3"><span></span></a>
  </div>

</div>
.box{
  width: 500px;
  height: 270px;
  background: aliceblue;
  position: relative;
}

.img-box{
  width: 100%;
  height: 100%;
  position: relative;
}
.img{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
}
.img1{
  background-image: url(https://wx2.sinaimg.cn/mw690/648ac377gy1ftr11txnsij20yg0oawm2.jpg);
  animation: a 9s linear;
  animation-iteration-count: infinite;
}
.img2{
  background-image: url(https://wx2.sinaimg.cn/mw690/648ac377gy1ftr11u121jj20yg0oaqam.jpg);
  animation: b 9s linear;
  animation-iteration-count: infinite;
}
.img3{
  background-image: url(https://wx2.sinaimg.cn/mw690/648ac377gy1ftr11tu1z3j20zk0p2dlz.jpg);
  animation: c 9s linear;
  animation-iteration-count: infinite;
}

.dot{
  position: absolute;
  bottom: 0;
  right: 7px;
}
.dot span{
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0.5);
  border: #FFFFFF solid 1px;
  border-radius: 50%;
  z-index: 1;
  margin-left: 5px;
  display: inline-block;
}
.dot span:hover{
  background: #ffffff;
}

#img1:target ~ .img{
  opacity: 0;
}
#img2:target ~ .img{
  opacity: 0;
}
#img3:target{
  opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.