我需要用原生js实现。同时时点击的图片往上移动 。同时四张图片一次向右移动 并且排列顺序按照上面的顺序排列

原生JavaScript实现这种图片轮播和顺序切换的效果，我们可以利用`requestAnimationFrame`创建动画帧，结合数组索引来控制图片的位置变化。首先，我们初始化图片元素和它们的状态：

// 假设我们有五个图片元素
const images = document.querySelectorAll('.slide-item');

let currentIndex = 0;

// 更新图片位置的函数
function updateImagePositions() {
  images[currentIndex].style.top = '0'; // 当前图片置顶
  images[currentIndex].classList.add('active'); // 添加激活状态

  for (let i = 0; i < images.length; i++) {
    if (i !== currentIndex) { // 非当前图片
      const nextPosition = (currentIndex + 1) % images.length; // 循环索引
      images[i].style.left = (nextPosition === 0 ? '' : `calc(100% * ${(i / (images.length - 1))})px`);
    }
  }

  // 下一步动画，改变当前图片
  currentIndex = (currentIndex + 1) % images.length;
  requestAnimationFrame(updateImagePositions);
}

// 开始动画
updateImagePositions();

在这个例子中，每次`updateImagePositions`被调用，都会执行以下操作：
- 将当前显示的图片移到顶部。
- 其他图片按顺序向右移动，使用百分比宽度表示位置。
- 切换到下一张图片，如果到了最后一张，则回到第一张。

记得给HTML结构添加适当的CSS样式，比如`:hover`状态下的`active`类。