Question

我正在尝试创建一个滑块，该滑块将从数组中提取img，然后将其显示在页面上，以便以后可以根据需要添加更多。我遇到的问题是显示了数组中的最后一个img，但是我无法使img通过我创建的click事件循环。

我尝试使用一些在网上找到的不同教程，但是其中大多数使用自动幻灯片功能。

let current = 0;
let slider = document.getElementById('slide-show')
let slides = slider.childNodes;
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let imgs = [
  '../img/img1.jpeg',
  '../img/img2.jpeg',
  '../img/img3.jpeg',
  '../img/img4.jpeg',
  '../img/img5.jpg'
];

function slideShow() {
  for(let i = 0; i < imgs.length; i++){
    let img = document.createElement('img');
    img.src = imgs[i];
    slider.appendChild(img)
  }
}

arrowLeft.addEventListener('click', function slideLeft(){
  if(current === 0) {
    current = slides.length;
    current--;
  }
});

arrowRight.addEventListener('click', function slideRight() {
  if(current === slides.length) {
    current = 0;
    current++;
  }
})

slideShow();

CSS

#slide-show {
  position: relative;
}

 #slide-show img {
  height: 300px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

预期该函数SlideLeft（）自然会允许您在img列表中向后移动。当然，arrowRight（）会将其向前移动。

Answer 1

https://codepen.io/levi_blodgett/pen/dEayLY

在我看来，您对DOM的操作与我所能说的有些出入，在这种情况下，我想说最有效的方法是仅检查事件单击，而不是始终在每个图像上进行for循环。

在这种情况下，我们所执行的操作将更改图像，而不是像以前那样更改每个图像的层次，这可能是无意的。

所以代替：

function slideShow() {
for(let i = 0; i < imgs.length; i++){
    let img = document.createElement('img');
    img.src = imgs[i];
    slider.appendChild(img)
  }
}

我们有：

function slideShow(imgCount) {
    let currentImg = document.getElementById('img');
    currentImg.src = imgs[imgCount];
}

应该更清楚地做什么，将图像设置为让事件侦听器为您迭代的当前迭代。该图像已设置为HTML，因此它可以编辑HTML，而不必自己创建元素，但是如果您愿意，可以这样做，您只需要在向左箭头后追加，可能会更困难遵循并执行。

Vanilla JS图像滑块使用数组保存不起作用的图像

1 个答案: