图片画廊效果

发布时间 2026-01-07 11:29:21
阅读量加载中...
效果预览

此演示仅在桌面端浏览器中可用
代码展示

     html
    
  
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>wanglei.live</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .container {
        width: 80%;
        margin: 0 auto;
        position: relative;
      }

      .container::after,
      .container::before {
        content: "";
        position: absolute;
        left: 0;
        background-color: white;
        width: 100%;
        height: 40px;
        border-radius: 50%;
      }

      .container::before {
        top: -20px;
      }

      .container::after {
        bottom: -20px;
      }

      ul {
        list-style: none;
        display: flex;
        overflow-x: scroll;
        scrollbar-width: none;
        scroll-behavior: smooth;
      }

      li {
        /* 不拉伸 不收缩 初始值 200px */
        flex: 0 0 200px;
      }

      /* 隐藏 WebKit 浏览器（Chrome、Safari）滚动条 */
      .scrollbar-container::-webkit-scrollbar {
        display: none;
      }

      .item {
        width: 100%;
        height: 150px;
        line-height: 150px;
        background-color: pink;
        text-align: center;
        font-weight: bold;
      }

      li:nth-child(2n) .item {
        background-color: beige;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <li>
          <div class="item">1</div>
        </li>
        <li>
          <div class="item">2</div>
        </li>
        <li>
          <div class="item">3</div>
        </li>
        <li>
          <div class="item">4</div>
        </li>
        <li>
          <div class="item">5</div>
        </li>
        <li>
          <div class="item">6</div>
        </li>
        <li>
          <div class="item">7</div>
        </li>
        <li>
          <div class="item">8</div>
        </li>
        <li>
          <div class="item">9</div>
        </li>
        <li>
          <div class="item">10</div>
        </li>
      </ul>
    </div>
    <script>
      const scrollbarContainer = document.querySelector(".container > ul");
      scrollbarContainer.addEventListener("wheel", (e) => {
        e.preventDefault();
        scrollbarContainer.scrollLeft += e.deltaY * 1.5;
      });
    </script>
  </body>
</html>
#After伪元素 #Before伪元素 #Flex #Css