javascript - 尝试滑动上一个和下一个图像时出错

Question

我尝试了很多示例，但我无法发布我尝试过的所有示例，但我可以分享一个示例，我认为这将符合我的要求，但是在使用相同的代码时我得到了错误。任何人都可以帮助我解决此问题。我收到以下错误：

无法读取 null 的属性“setAttribute”未捕获的
类型错误：无法读取 null 的属性“addEventListener”

我有下面的 html 代码，它在第一个 div 中有当前图像，第二个 div 有多个水平放置的图像。下面是我的 html 代码

<div class="container">
  <div class="column">
    <h3>Vanilla JS Slider</h3>
    <h4 class="arrows"><span class="prev">&#8592;</span><span> All Kittens </span><span class="next">&#8594;</span></h4>
    <img id="display" src="C:\namedimages\img.jpg" marginheight="0" marginwidth="0" />
  </div>
  <div id="content">
    <img src="C:\namedimages\img1.jpg" alt="Georges" class="images" />
    <img src="C:\namedimages\img2.jpg" alt="Gers" class="images" />
    <img src="C:\namedimages\img3.jpg" alt="Providence" class="images" />
    <img src="C:\namedimages\img4.jpg" alt="Providence" class="images" />
    <img src="C:\namedimages\img5.jpg" alt="Providence" class="images" />
  </div>
</div>

Jquery 代码- 这是我的功能，但是在单击 perv 和 next 按钮后，我无法看到应该出现的下一个图像。

const leftArrow = document.querySelector('.prev');
const rightArrow = document.querySelector('.next');
const imageGallery = document.querySelectorAll("#content img");
const displayImg = document.querySelector("#display");
let activeImageIndex = 0;
window.addEventListener('load', renderSlider);
leftArrow.addEventListener('click', handlePrev);
window.addEventListener('keyup', handlePrev);
rightArrow.addEventListener('click', handleNext);
window.addEventListener('keyup', handleNext);
imageGallery.forEach((image, index) => {
image.addEventListener('click', () => {
    activeImageIndex = index;
    renderDisplayImage(activeImageIndex);
    setActiveClass(activeImageIndex);
    
    
    if(index === 0) leftArrow.style.display = 'none';
    else leftArrow.style.display = 'block';
  })
}) 
function renderDisplayImage(imageIndex) {
  displayImg.setAttribute('src', urls[imageIndex]);
}    
function renderSlider() {
  renderDisplayImage(activeImageIndex);
  imageGallery.forEach((img, index) => {
    img.setAttribute('src', urls[index]);
    if(index === 0) img.classList.add('active');
  })
}

function handlePrev(event) {
  if(event.type === 'keyup' && event.key !== 'ArrowLeft') return;
  
  activeImageIndex = (urls.length + (activeImageIndex-1)) % urls.length;
  renderDisplayImage(activeImageIndex);
  setActiveClass(activeImageIndex);
  
  if(activeImageIndex === 0) leftArrow.style.display = 'none';
  else leftArrow.style.display = 'block';
}


function handleNext() {
  if(event.type === 'keyup' && event.key !== 'ArrowRight') return;
  
  activeImageIndex = (activeImageIndex+1) % urls.length;
  renderDisplayImage(activeImageIndex);
  setActiveClass(activeImageIndex)
  
  if(activeImageIndex > 0) leftArrow.style.display = 'block';
  else leftArrow.style.display = 'none';
}

function setActiveClass(imageIndex) {
  imageGallery.forEach((image, index) => {
    if(index === imageIndex) image.classList.add('active');
    else image.classList.remove('active');
  })
}

CSS- 下面是 Perv 和 Next 图片的 CSS

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.column img {
  width: 50%;
}

.arrows {
  display: flex;
}

.prev, .next {
  cursor: pointer;  
}

.prev {
  display: none;
}


#content {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

#content img {
  width: 20%;
}

#content img.active {
  width: 20%;
  border: 2px solid red;
}

.prev, .next, .column {
  user-select: none;
}

标签： javascripthtmlcss