如何在JS轮播图中调整子元素（图片）的顺序？

需求说明 #

我正在制作一个简单的JS滑块，希望点击prev/next按钮时实现特定的图片顺序调整：点击按钮后，让img2与img1交换位置，同时img1移动到img5的位置（实现循环滚动效果）。

现有HTML结构 #

<div id="slider-container">
  <div class="btn" id="prevBtn">
    <i class="arrow arrowLeft"></i>
  </div>
  <div class="multiple-items">
    <div>
      <img class="carousel-img" src="assets/carousel/img1.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img2.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img3.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img4.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img5.png">
    </div>
  </div>
  <div class="btn" id="nextBtn">
    <i class="arrow arrowRight"></i>
  </div>
</div>

已完成的JS代码（仅添加事件监听器） #

prevBtn.addEventListener('click', () => {
if (i > 1) {
    i--
} else {
    i = 5;
}
});

nextBtn.addEventListener('click', () => {
    if (i < 5) {
        i++
    } else {
        i = 1;
    }
}) 

解决方案 #

要实现需求的图片位置调整逻辑，可以直接操作DOM元素的位置，无需额外维护索引变量。以下是完整实现代码：

完整JS代码 #

const sliderWrapper = document.querySelector('.multiple-items');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

// 点击prev按钮：将最后一个图片项移到最前面
prevBtn.addEventListener('click', () => {
  const lastItem = sliderWrapper.lastElementChild;
  sliderWrapper.insertBefore(lastItem, sliderWrapper.firstElementChild);
});

// 点击next按钮：将第一个图片项移到最后面
nextBtn.addEventListener('click', () => {
  const firstItem = sliderWrapper.firstElementChild;
  sliderWrapper.appendChild(firstItem);
});

逻辑说明 #

• next按钮效果：点击后取出容器内第一个图片项，将它追加到容器末尾，正好实现“img2移到原img1位置，img1移到原img5位置”的需求。
• prev按钮效果：点击后取出容器内最后一个图片项，插入到容器最前面，实现反向循环滚动。
• 无需额外维护索引变量，直接操作DOM元素位置，逻辑直观且天然支持循环滚动。

内容的提问来源于stack exchange，提问作者JOKER