如何用原生JavaScript通过上下页按钮逐张切换列表项（无jQuery）

你当前代码的核心问题是硬编码固定操作第1、2个幻灯片（索引0、1），没有记录当前激活的幻灯片位置，也没有做边界循环判断，所以无法支持多幻灯片切换、首尾循环的需求。

核心实现逻辑 #

• 新增currentIndex变量存储当前显示的幻灯片索引，初始值为0，对应默认展示第一个幻灯片
• 封装通用的幻灯片更新函数：每次切换时先隐藏所有幻灯片，再将当前索引对应的幻灯片设为可见
• 点击下一页时索引+1，通过取模运算实现边界判断：到最后一个幻灯片后自动回到第一个
• 点击上一页时索引-1，通过加总长度再取模避免负数索引：到第一个幻灯片后自动跳到最后一个

修复后完整代码 #

JavaScript代码 #

// 获取所有幻灯片元素集合
const listItems = document.getElementById("slides-container-li").children;
// 记录当前激活的幻灯片索引，默认显示第一个
let currentIndex = 0;

// 统一更新幻灯片显隐状态
function renderActiveSlide() {
  // 隐藏所有幻灯片
  for (let i = 0; i < listItems.length; i++) {
    listItems[i].style.display = "none";
  }
  // 仅显示当前索引对应的幻灯片
  listItems[currentIndex].style.display = "inline";
}

// 下一页切换逻辑
function clickNext() {
  // 取模运算实现循环：索引等于幻灯片总数时自动归零回到第一个
  currentIndex = (currentIndex + 1) % listItems.length;
  renderActiveSlide();
}

// 上一页切换逻辑
function clickPrevious() {
  // 先加总长度再取模，避免出现负数索引：索引为0时自动跳到最后一个
  currentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
  renderActiveSlide();
}

// 页面初始化时渲染一次，保证默认状态和逻辑一致
renderActiveSlide();

CSS代码（优化了重复样式，可直接替换原有代码） #

.container {
  background: gray;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slides-container-li {
  width: 90%;
  height: 90%;
  background: lightblue;
  display: flex;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 统一设置所有幻灯片的公共样式，无需单独为每个幻灯片重复编写 */
.slides-container-li > div {
  width: 90%;
  height: 100%;
  margin: auto;
  display: none;
  font-size: 100px;
}

/* 单独设置不同幻灯片的差异化样式（背景色） */
.div1 {
  background: orange;
}
.div2 {
  background: red;
}
.div3 {
  background: yellow;
}

.btn-container {
  width: 100%;
  display: flex;
  background: lightgray;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
}

HTML代码（原有结构做了规范修正，可直接使用） #

<div class="container">
  <ul class="slides-container-li" id="slides-container-li">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </ul>
</div>

<div class="btn-container">
  <button class="Previous-btn" id="Previous-btn" onclick="clickPrevious()">Previous</button>
  <button class="slide-btn" id="slide-btn" onclick="clickNext()">next</button>
</div>

小提示：原代码中直接用li作为容器不符合HTML规范，上述代码已将外层li替换为ul，如果要保留li标签，记得把幻灯片项改成li标签嵌套在ul内即可。

扩展说明 #

后续如果要新增幻灯片，只需要在slides-container-li容器内新增对应的div、设置好背景色即可，不需要修改JS逻辑，轮播会自动适配新的幻灯片总数。

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