javascript - 使用向右或向左箭头键更改图像

Question

我建立了这个画廊 https://jsfiddle.net/ramamamagagaulala/do4yLxcz/

let images = document.querySelectorAll('.work-item');
let best = document.querySelector('.work-modal');
let main = document.querySelector('.work-modal__item');

console.log(images)

let closeButton = document.getElementById("closee");

images.forEach(function(ref) {

ref.addEventListener('click', function(){
  let newImage = this.getElementsByTagName('img')[0].src;


  best.classList.add('work-modal--show');
  main.style.backgroundImage = `url( ${newImage} )`;
})


})

closeButton.addEventListener('click', function() {
  best.classList.remove('work-modal--show');
});

基本上，它是这样工作的:

• 您点击了一个项目。
• JavaScript 检查此项目包含的 IMG。
• 模式窗口打开。
• 然后与该项目关联的 IMG 将显示为该模式的背景图像。

到目前为止一切顺利，但是，我想构建一个函数，以便按下键盘上的箭头键并显示下一张图像。

我尝试的是在单击时选择 nextSibling 的 IMG。然后我使用这个变量来设置模态窗口的背景图像。但这只奏效了一次。

知道接下来要尝试什么吗？

Answer 1

我建议在 .js 文件中的数组中包含图像 url 列表，然后显示一个模式，单击右/左并将 img src 值更改为下一个/上一个数组元素，直到到达数组的任一端.