前端 CSS 经典：3D 渐变轮播图

最新推荐文章于 2024-07-04 16:37:43 发布

yqcoder

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量694

点赞数 16

分类专栏：前端 CSS 经典文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_64684095/article/details/139153341

版权

前端 CSS 经典专栏收录该内容

35 篇文章 1 订阅

订阅专栏

前言：无论什么样式的轮播图，核心 JS 实现原理都差不多。所以小伙伴们，还是需要了解一下核心 JS 实验原理的。

效果图：

实现代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .carousel {
        display: flex;
        position: relative;
        width: 705px;
        margin: 50px auto;
        overflow: hidden;
      }
      .carousel-box {
        perspective: 1000px;
        width: 100%;
        height: 200px;
      }
      .carousel-item {
        position: absolute;
        left: calc(50% - 200px);
        width: 400px;
        height: 100%;
        user-select: none;
        transition: all 0.4s ease;
      }
      .indicator {
        position: absolute;
        top: calc(50% - 25px);
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid;
        z-index: 999;
        border-radius: 50%;
        font-size: 25px;
        cursor: pointer;
      }
      .prev {
        left: 0;
      }
      .next {
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="carousel">
      <div class="carousel-box">
        <img class="carousel-item" src="2.jpg" />
        <img class="carousel-item" src="2.jpg" />
        <img class="carousel-item" src="2.jpg" />
        <img class="carousel-item" src="2.jpg" />
        <img class="carousel-item" src="2.jpg" />
      </div>
      <div class="indicator prev"><</div>
      <div class="indicator next">></div>
    </div>
    <script>
      const items = document.querySelectorAll(".carousel-item"); // 拿到所有轮播图片
      let index = 2; // 当前索引

      // 布局函数
      const layout = () => {
        console.log(items, index);
        const offsetStep = 100; // 两张图片的偏移量
        const scaleStep = 0.6; // 两张图片的缩放比例
        const opacityStep = 0.5; // 两张图片的透明度

        for (let i = 0; i < items.length; i++) {
          const item = items[i];
          const dis = Math.abs(i - index); // 布局比例
          const sign = i - index > 0 ? 1 : -1; // 布局方向

          const zIndex = items.length - dis;
          const scale = scaleStep ** dis;
          let rotateY = 45 * -sign;
          const opacity = opacityStep ** dis;
          let xOffset = (i - index) * offsetStep;
          if (i !== index) {
            xOffset = xOffset + 100 * sign;
          } else {
            rotateY = 0;
          }

          item.style.zIndex = zIndex;
          item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)`;
          item.style.opacity = opacity;
          console.log(item);
        }
      };
      layout();
      // 向前的按钮
      const prev = document.querySelector(".prev");
      prev.onclick = () => {
        index--;
        if (index < 0) {
          index = 0;
        }
        layout();
      };

      // 向后的按钮
      const next = document.querySelector(".next");
      next.onclick = () => {
        index++;
        if (index > items.length - 1) {
          index = items.length - 1;
        }
        layout();
      };

      // 点轮播图
      items.forEach((item, i) => {
        item.onclick = () => {
          index = i;
          layout();
        };
      });
    </script>
  </body>
</html>