动态数量幻灯片

            
            #slide {
  width: 350px;
  height: 350px;
  position:relative;
  backface-visibility: visible;
  perspective-origin: 50% 140%;
  perspective: 200px;
  border: 1px solid #aaa;
}

#slide .item {
  width: 50px;
  height: 50px;
  background-color: #aaa;
  position: absolute;
  font-size: 13px;
  transition: transform 0.8s, z-index 0.8s;
  /* transform: translateZ(50px); */
}
        

            
            const DETECTRON2_COLORS = [
    [0.0, 0.447, 0.741],
    [0.85, 0.325, 0.098],
    [0.929, 0.694, 0.125],
    [0.494, 0.184, 0.556],
    [0.466, 0.674, 0.188],
    [0.301, 0.745, 0.933],
    [0.635, 0.078, 0.184],
    [0.3, 0.3, 0.3],
    [0.6, 0.6, 0.6],
    [1.0, 0.0, 0.0],
    [1.0, 0.5, 0.0],
    [0.749, 0.749, 0.0],
    [0.0, 1.0, 0.0],
    [0.0, 0.0, 1.0],
    [0.667, 0.0, 1.0],
    [0.333, 0.333, 0.0],
    [0.333, 0.667, 0.0],
    [0.333, 1.0, 0.0],
    [0.667, 0.333, 0.0],
    [0.667, 0.667, 0.0],
    [0.667, 1.0, 0.0],
    [1.0, 0.333, 0.0],
    [1.0, 0.667, 0.0],
    [1.0, 1.0, 0.0],
    [0.0, 0.333, 0.5],
    [0.0, 0.667, 0.5],
    [0.0, 1.0, 0.5],
    [0.333, 0.0, 0.5],
    [0.333, 0.333, 0.5],
    [0.333, 0.667, 0.5],
    [0.333, 1.0, 0.5],
    [0.667, 0.0, 0.5],
    [0.667, 0.333, 0.5],
    [0.667, 0.667, 0.5],
    [0.667, 1.0, 0.5],
    [1.0, 0.0, 0.5],
    [1.0, 0.333, 0.5],
    [1.0, 0.667, 0.5],
    [1.0, 1.0, 0.5],
    [0.0, 0.333, 1.0],
    [0.0, 0.667, 1.0],
    [0.0, 1.0, 1.0],
    [0.333, 0.0, 1.0],
    [0.333, 0.333, 1.0],
    [0.333, 0.667, 1.0],
    [0.333, 1.0, 1.0],
    [0.667, 0.0, 1.0],
    [0.667, 0.333, 1.0],
    [0.667, 0.667, 1.0],
    [0.667, 1.0, 1.0],
    [1.0, 0.0, 1.0],
    [1.0, 0.333, 1.0],
    [1.0, 0.667, 1.0],
    [0.333, 0.0, 0.0],
    [0.5, 0.0, 0.0],
    [0.667, 0.0, 0.0],
    [0.833, 0.0, 0.0],
    [1.0, 0.0, 0.0],
    [0.0, 0.167, 0.0],
    [0.0, 0.333, 0.0],
    [0.0, 0.5, 0.0],
    [0.0, 0.667, 0.0],
    [0.0, 0.833, 0.0],
    [0.0, 1.0, 0.0],
    [0.0, 0.0, 0.167],
    [0.0, 0.0, 0.333],
    [0.0, 0.0, 0.5],
    [0.0, 0.0, 0.667],
    [0.0, 0.0, 0.833],
    [0.0, 0.0, 1.0],
    [0.0, 0.0, 0.0],
    [0.143, 0.143, 0.143],
    [0.857, 0.857, 0.857],
    [1.0, 1.0, 1.0],
];

const colors = (function () {
    const RGBs = [];
    DETECTRON2_COLORS.map((color) => {
        const [r, g, b] = color.map((n) => {
            return Math.round(n * 255);
        });
        RGBs.push(`rgb(${r},${g},${b})`);
    });
    return RGBs;
})();

function rotatePoint(point, angle, originPoint = {x: 0, y: 0}) {
    const cosA = Math.cos(angle * Math.PI / 180);
    const sinA = Math.sin(angle * Math.PI / 180);
    const rx = originPoint.x + (point.x - originPoint.x) * cosA - (point.y - originPoint.y) * sinA;
    const ry = originPoint.y + (point.x - originPoint.x) * sinA - (point.y - originPoint.y) * cosA;
    return { x: Math.floor(rx),y: Math.floor(ry) };
}
let center = { x: 150, y: 150}
let start_point = { x: center.x, y: center.y - 100 };
let radius = center.y - start_point.y;//半径
console.log('半径',radius);
console.log('start_point',JSON.stringify(start_point));
let count = 10;
let single_angle = 360/count

const slide = document.getElementById("slide");
const slideData = [];

let n = Math.ceil(count / 2)
for(let i = 0; i< count; i++){
  const p = rotatePoint(start_point, single_angle * i, center)
  let ratio = Math.abs((p.y - start_point.y - radius * 2) /(radius * 2))
  // console.log(JSON.stringify(p), p.y - start_point.y - radius * 2, ratio);
  const itemEl = document.createElement("div");
  itemEl.classList.add("item");
  // itemEl.innerText = `${p.x},${p.y}`;
  itemEl.style.backgroundColor = colors[i];
  setStyle(itemEl, i);
  slide.append(itemEl);
  slideData.push({
    el: itemEl, index: i,
  })
}

function setStyle(el,i) {
    const p = rotatePoint(start_point, single_angle * i, center)
    let ratio = Math.abs((p.y - start_point.y - radius * 2) /(radius * 2))
    let zIndex = 1000 - ratio * 100
    // console.log(ratio,zIndex)
    el.style.zIndex = Math.floor(zIndex);
    // el.innerText = `${zIndex}`;

    el.style.transform = `translate(${p.x}px,${p.y}px) translateZ(${200 * (-0.7 * ratio)}px)`;
}

function next() {
  slideData.forEach(item => {
    if(item.index < count-1) {
      item.index ++;
    } else {
      item.index = 0;
    }
    setStyle(item.el, item.index)
  })
}

//每2秒循环执行
setInterval(() => {
  next();
}, 2000)