Javascript 更改图像在阵列中的位置

我正在向我的页面添加图像滑块，并试图在单击“左键”或“右键”时更改图像

当我在函数中记录数组时，它会根据我的意愿改变顺序，但我的图像不会发生任何变化。他们保持相同的姿势

---

对我应该做什么有什么建议吗

您已创建图像的

副本

。更改图像

数组位置

，将不会

反映在DOM中

。您需要

清除dom

并

重建它

建议：使用基于位置的显示隐藏元素，而不是创建dom


const btnLeft=document.querySelector（“.left”）；
const btnRight=document.querySelector（“.right”）；
让images=document.queryselectoral（“img”）；
设arr=[…图像]；
const gallary=document.querySelector（“.gallary”）；
btnLeft.addEventListener（“单击”，函数（）{
gallary.innerHTML=“”；
arr.push（arr.shift（））；
arr.forEach（（dom）=>{
gallary.append（dom）；
});
});

左卷轴
向右滚动

<div class="gallary">
  <img class="img" src='https://images.unsplash.com/photo-1587374194137-681fd73fab43?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='0'>
  <img class="img" src='https://images.unsplash.com/photo-1586283294663-b82b25f4d660?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='1'>
  <img class="img" src='https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='2'>
  <img class="img" src='https://images.unsplash.com/photo-1552236867-1caaa93299e2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='3'>
</div>

<button class="button left"  >
  Scroll left
</button>

<button class="button right" >
  scroll right
</button>

const btnLeft = document.querySelector(".left");
const btnRight = document.querySelector(".right");

let images = document.querySelectorAll("img");
let arr = [...images];



btnLeft.addEventListener("click", function(){
   arr.push(arr.shift());
  console.log(arr);
})