第一种：用float

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      text-decoration: none;
    }
    #wrap{
      width: 590px;
      height: 470px;
      border: 10px solid orange;
      overflow: hidden;
      position: relative;
    }
    ul{
      width: 2360px;
    }
    ul>li{
      float: left;
    }
    .pot{
      position: absolute;
      width: 100px;
      height: 20px;
      background-color: red;
      bottom: 30px;
      left: 30px;
    }

  </style>
</head>
  <body>
    <!-- 轮播图 -->
    <div id="wrap">
      <!-- 图片 -->
      <ul>
        <li>
          <a href="#">
            <img src="./img/1.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/2.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/3.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/4.jpg" alt="" />
          </a>
        </li>
      </ul>

      <!-- 导航点 -->
      <div class="pot">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>
      <!-- 上下一张 -->
    </div>
  </body>
</html>

第二种：用定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
      }
      #wrap{
          position: relative;
          height: 470px;
          width: 590px;
      }
      ul>li{
          position: absolute;
      }
      ul>li:nth-child(4){
          z-index: 3;
      }

      /*设置小圆点 */
      .pot {
        position: absolute;
        bottom: 20px;
        left: 30px;
        z-index: 999;
      }
      .pot > a {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        border: 3px solid rgba(0, 0, 0, 0.05);
      }
      .pot > a:hover {
        background-color: white;
        border: 3px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 轮播图 -->
    <div id="wrap">
      <!-- 图片 -->
      <ul>
        <li>
          <a href="#">
            <img src="./img/1.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/2.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/3.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/4.jpg" alt="" />
          </a>
        </li>
      </ul>

      <!-- 导航点 -->
      <div class="pot">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>
    </div>
  </body>
</html>

第三种：用插件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入swiper.css -->
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
    <!-- 引入swiper.js -->
    <script src="./swiper/swiper-bundle.min.js"></script>
    <style>
      .swiper {
        width: 570px;
        height: 490px;
        position: relative;
        overflow: hidden;
      }
      .swiper-pagination {
        bottom: 30px !important;
      }
      .swiper {
        --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
        --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
        --swiper-navigation-size: 50px; /* 设置按钮大小 */
      }
    </style>
  </head>
  <body>
    <div class="swiper">
      <!-- 图片 -->
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./img/1.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img/2.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img/3.jpg" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <script>
      var mySwiper = new Swiper(".swiper", {
        //   设置图片的切换模式
        effect: "cube",
        //   设置自动切换的时间
        autoplay: {
          delay: 5000,
        },
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    </script>

    <!-- https://www.swiper/ -->
  </body>
</html>

总结下来，轮播图：

     一般分为两类

       一、自己手写（配合js,目前的话，大家掌握原理和样式）

         1、用float为主

            建一个对外的窗口，让图片整个横向排列，通过调整整个图片的水平方向，

              来显示对应的图片

         2、用定位为主

            让图片叠在一起，通过改变图片的层级，来决定显示哪张图片

       二、用各种插件、或者框架（别人写的，你来用）

更多推荐

CSS入门篇15.轮播图的三种实现方法