轮播图

轮播图的底层原理

先把所有图片布局在正中间
通过 layout() 函数，根据 index 设置正确的布局

// 3D 轮播图
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
const items = document.querySelectorAll(".carousel-item");

// 当前显示的是第几张图片
let index = 0;

/**
 * 根据当前的 index 设置正确的布局
 * 1. 设置 translateX
 * 2. 设置 z-index
 * 3. 设置 scale
 */
function layout() {
  const offsetStep = 100; // 偏移量
  const scaleStep = 0.6; // 缩放比例
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    const dis = i - index; // 下标距离
    const sign = Math.sign(dis); // 正负号

    // 1. 设置 translateX | scale | rotate
    const offsetX = dis * offsetStep + 100 * sign;
    const scale = scaleStep ** Math.abs(dis);
    const rotate = -sign * 45;
    item.style.transform = `translateX(${offsetX}px) scale(${scale}) rotateY(${rotate}deg)`;
  }

  // 2. 设置 z-index
  const zIndex = items.length - Math.abs(dis);
  item.style.zIndex = zIndex;
}

/** 上一张 */
prev.onclick = () => {
  index--;
  if (index < 0) index = 0;
  layout();
};

/** 下一张 */
next.onclick = () => {
  index++;
  if (index > items.length - 1) index = items.length - 1;
  layout();
};

/** 点击图片 */
items.forEach((item, i) => {
  item.onclick = () => {
    index = i;
    layout();
  };
});

layout();

轮播图

轮播图的底层原理

其它