如何使用JavaScript实现轮播滑动后自动控制切换按钮显隐

实现思路 #

现有代码已经完成轮播位移的基础逻辑，只需补充以下调整即可满足交互要求：

• 初始化阶段默认隐藏上一页按钮，匹配轮播初始停在第一张的状态
• 修正原有边界判断的逻辑错误，确保轮播可以正常抵达最后一张幻灯片
• 抽离独立的按钮状态更新方法，每次滑动完成后根据当前轮播位置动态切换两个按钮的显隐：
  • 处于第一张幻灯片时：隐藏上一页按钮，显示下一页按钮
  • 处于最后一张幻灯片时：隐藏下一页按钮，显示上一页按钮
  • 处于中间幻灯片时：两个按钮均显示

完整可运行代码 #

修复原有语法疏漏（变量声明漏写逗号）、边界判断错误，新增按钮控制逻辑后的代码如下：

const next = document.querySelector('.btn_next_slide'),
prev = document.querySelector('.btn_prev_slide'),
line = document.querySelector('.product_slider_line'),
slides = document.getElementsByClassName('product_slider').length,
step = document.querySelector('.product_slider').clientWidth,
count = 0;

// 初始化按钮状态
prev.style.display = 'none';

// 统一处理按钮显隐逻辑
function updateButtonVisibility() {
    if (count === 0) {
        prev.style.display = 'none';
        next.style.display = 'block';
        return;
    }
    if (count === slides - 1) {
        next.style.display = 'none';
        prev.style.display = 'block';
        return;
    }
    prev.style.display = 'block';
    next.style.display = 'block';
}

next.onclick = () => {
    count++;
    // 边界控制：抵达最后一张后停止递增
    if (count > slides - 1) count = slides - 1;
    line.style.transform = `translate(${-step * count}px)`;
    updateButtonVisibility();
};

prev.onclick = () => {
    count--;
    // 边界控制：抵达第一张后停止递减
    if (count < 0) count = 0;
    line.style.transform = `translate(${-step * count}px)`;
    updateButtonVisibility();
};

适配提示 #

如果你当前项目不是通过display属性控制元素显隐，而是通过类名切换、透明度、定位偏移等方式实现，只需要替换updateButtonVisibility方法内的样式操作逻辑即可，核心位置判断规则无需修改。

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