切片式轮播图

借鉴自时迁酱

css

            * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      body {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle at top, #444, #000);
      }

      .main {
        display: flex;
        -webkit-box-reflect: below 13px linear-gradient(transparent 70%,rgba(0,0,0,0.2));
      }

      .box {
        width: 900px;
        height: 500px;
        background-size: cover;
        transition: all 0.5s;
      }

      .box img {
        width: 900px;
        height: 500px;
      }

      .main .content {
        height: 500px;
      }

      .main .content ul {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
      }

      .content ul li {
        width: 150px;
        height: 90px;
      }

      .content ul li:hover img {
        opacity: 0;
        transform: translateX(-150px);
      }

      .content li .current {
        opacity: 0;
        transform: translateX(-150px);
      }

      .content ul img {
        width: 100%;
        height: 100%;
        transition: all 0.5s;
      }

html

    <div class="main">
      <div class="box"></div>
      <div class="content">
        <ul>
          <li><img src="./img/5-img/bg0.webp" alt="" /></li>
          <li><img src="./img/5-img/bg1.webp" alt="" /></li>
          <li><img src="./img/5-img/bg2.webp" alt="" /></li>
          <li><img src="./img/5-img/bg3.webp" alt="" /></li>
          <li><img src="./img/5-img/bg4.webp" alt="" /></li>
        </ul>
      </div>
    </div>

javascript

   var list = document.querySelectorAll(".main .content li");
   var img = document.querySelectorAll('img');
   var box = document.querySelector(".main .box");
   var main = document.querySelector(".main");
   var timer = null;
   var num = 1;


   box.style.backgroundImage = "url(./img/5-img/bg0.webp)";    
   function Reset() {
      img.forEach((item,index) => img[index].className = '');
    }

   list.forEach((item, index) => {
     item.addEventListener("mouseenter", function () {
     Reset();
     box.style.backgroundImage = "url(./img/5-img/bg" + index + ".webp)";
     num = index + 1;
        });
      });

    function Auto_Play() {
      timer = setInterval(function () {
          if (num > 4) {
            num = 0;
          }
          Reset();
          img[num].className = 'current';
          box.style.backgroundImage = "url(./img/5-img/bg" + num + ".webp)";    
          num++;
        }, 1600);
      }

      Auto_Play();

    main.addEventListener("mouseenter", function () {
        clearInterval(timer);
      });

    main.addEventListener("mouseleave", function () {
        Auto_Play();
      });