如何通过递增class名内的序号实现div切换轮播效果？

原有代码核心问题 #

• 你使用getElementById获取元素，但你的div设置的是class属性而非id，无法匹配到对应元素
• 索引变量定义在函数内部，每次调用函数都会重置为初始值，无法保存上一次的切换状态
• div元素不存在value属性，对该属性赋值没有任何作用，也无法实现div切换显示的效果

完整调整代码 #

HTML结构 #

<!-- 给所有轮播div新增公共类box，保留原有box1~box4类名 -->
<div class="box box1 active">第一张内容</div>
<div class="box box2">第二张内容</div>
<div class="box box3">第三张内容</div>
<div class="box box4">第四张内容</div>

<!-- 按钮代码可以保留原有逻辑 -->
<input class="buttongray" value="next" onclick="increase()">
<input class="buttonblue" value="back" onclick="decrease()">

CSS样式 #

/* 所有轮播项默认隐藏 */
.box {
  display: none;
}
/* 激活状态的轮播项显示，可根据自身需求修改展示样式 */
.box.active {
  display: block;
}

JavaScript逻辑 #

// 全局存储当前激活的轮播项索引，初始值为1对应box1
let currentIndex = 1;
// 动态获取轮播项总数，后续新增轮播项无需修改JS参数
const totalBox = document.querySelectorAll('.box').length;

function increase() {
  // 点击next索引+1，超过总数则回到第一个实现循环切换
  currentIndex = currentIndex >= totalBox ? 1 : currentIndex + 1;
  updateBoxState();
}

function decrease() {
  // 点击back索引-1，小于1则回到最后一个实现循环切换
  currentIndex = currentIndex <= 1 ? totalBox : currentIndex - 1;
  updateBoxState();
}

// 统一更新轮播项显示状态
function updateBoxState() {
  // 移除所有轮播项的激活状态
  document.querySelectorAll('.box').forEach(item => {
    item.classList.remove('active');
  })
  // 给当前索引对应的轮播项添加激活状态
  document.querySelector(`.box${currentIndex}`).classList.add('active');
}

扩展说明 #

如果不需要循环切换，只要修改increase、decrease中的边界判断逻辑即可：

• 点击next时如果当前已经是最后一张，直接return不执行索引递增
• 点击back时如果当前已经是第一张，直接return不执行索引递减

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