网页滑块功能异常排查：图片无法切换且默认显示最后一张

问题现象 #

开发的图片滑块默认显示最后一张图片，点击切换按钮无响应，控制台无报错信息。

核心问题分析 #

1. DOM元素选择错误：
   JavaScript中const images = document.getElementsByClassName('images')获取的是带有images类的容器div，而非容器内的img标签。HTML结构里仅存在一个.images容器，导致images.length为1，切换逻辑完全无法正常执行。

2. CSS布局导致图片重叠：
   所有img标签被设置为position: absolute，默认会堆叠在一起，最后一个img会显示在最上层，因此页面加载后默认看到最后一张图。

3. a标签默认跳转干扰：
   切换按钮使用了<a>标签且href="#"，点击时会触发页面跳转（滚动到顶部），直接掩盖了JavaScript的切换逻辑效果。

修复方案 #

1. 修正图片元素选择逻辑 #

将JavaScript中获取图片的代码改为目标img标签：

// 替换原有的images选择器
const images = document.querySelectorAll('.images img')

2. 调整初始图片显示逻辑 #

确保初始状态下仅显示第一张图片：

let imageNr = 0

// 隐藏所有图片
Array.from(images).forEach(image => {
  image.style.display = 'none'
})
// 显示第一张图片
images[0].style.display = 'block'

3. 阻止a标签默认跳转行为 #

在点击事件处理函数中添加阻止默认行为的代码：

previous.addEventListener("click", (e) => {
  e.preventDefault() // 阻止页面跳转
  if (imageNr <= 0) {
    imageNr = images.length - 1
  } else {
    imageNr -= 1
  }
  Array.from(images).forEach(image => {
    image.style.display = 'none'
  })
  images[imageNr].style.display = 'block'
})

next.addEventListener('click', (e) => {
  e.preventDefault() // 阻止页面跳转
  if (imageNr >= images.length - 1) {
    imageNr = 0
  } else {
    imageNr += 1
  }
  Array.from(images).forEach(image => {
    image.style.display = 'none'
  })
  images[imageNr].style.display = 'block'
})

4. 可选：优化分页点生成逻辑 #

原代码中分页点是根据.images容器数量生成的，现在改为根据img数量生成，确保分页点数量正确：

// 替换原有的分页生成代码
images.forEach(() => {
  pagination.innerHTML += `<div class='page'></div>`
})

修复后效果 #

• 默认显示第一张图片
• 点击前后按钮可正常切换图片
• 分页点数量与图片数量匹配

内容的提问来源于stack exchange，提问作者Aliona_91