利用css完成轮播图效果方法很简单

一、首先可以给图片盒子加浮动或者flex让其在一行内显示，再给父盒子添加overflow:hidden;属性让超出的图片隐藏起来。

二、利用a标签的跳转效果，给对应的图片盒子设置ID属性值，
将图片盒子的ID属性值加入对应的a标签中的href属性中
例如 <a href="#box1> </a>，

三、当我们点击a标签时，它就会跳转到对应的图片，由此可以完成简单的轮播图效果。

给父盒子添加scroll-behavior: smooth;这个属性可减慢图片跳转速度

下面参考代码：

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin: 200px auto;
      width: 520px;
      height: 280px;
      border: 1px solid #000;
      position: relative;
    }

    ul {
      display: flex;
      overflow: hidden;
      scroll-behavior: smooth;
    }

    li {
      list-style: none;
    }

    p {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    p a {
      display: inline-block;
      width: 40px;
      height: 40px;
      color: #fff;
      font-size: 20px;
      text-decoration: none;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div>
    <ul>
      <li id="box1"><img src="images/1.jpg" alt=""></li>
      <li id="box2"><img src="images/2.jpg" alt=""></li>
      <li id="box3"><img src="images/3.jpg" alt=""></li>
    </ul>
    <p><a href="#box1">1</a><a href="#box2">2</a><a href="#box3">3</a></p>
  </div>
</body>