改变阵列中图像的位置

Question

我在页面中添加了一个图像滑块，并试图在单击"左键"或"右键"时更改图像

<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>

对于我的js文件，我选择了左键和右键，并在左键中添加了一个事件侦听器

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);
})

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

对我该怎么做有什么建议吗？

Answer 1

您已经创建了一个copy of images。更改图像array position，而不是reflect in DOM。你需要clear dom和reconstruct。

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

const btnLeft = document.querySelector(".left");
const btnRight = document.querySelector(".right");
let images = document.querySelectorAll("img");
let arr = [...images];
const gallary = document.querySelector(".gallary");
btnLeft.addEventListener("click", function () {
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 activeIndex = 0;
toggleImage(activeIndex);
btnLeft.addEventListener("click", function () {
activeIndex -= 1;
if (activeIndex < 0) {
activeIndex = images.length-1;
}
toggleImage(activeIndex);
});
btnRight.addEventListener("click", function () {
activeIndex += 1;
if (activeIndex >= images.length) {
activeIndex = 0;
}
toggleImage(activeIndex);
});
function toggleImage(index) {
images.forEach((img) => {
img.classList.remove("active");
img.classList.add("hide");
});
images[index].classList.remove("hide");
images[index].classList.add("active");
}

.active {
border: 1px solid;
display: block;
}
.gallary .hide {
display: none;
}

<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>