如何实现点击右键显示下一项、左键返回上一项？是否有相关依赖库？

一、原生代码实现（无依赖） #

不需要额外依赖库，直接用原生JS就能快速实现，核心逻辑是监听鼠标事件并控制当前展示项的索引：

1. 核心逻辑步骤 #

• 阻止右键默认的系统菜单弹出，避免干扰功能触发
• 维护currentIndex变量，记录当前展示项的位置
• 左键点击时索引减1，边界处理：索引小于0时自动切换到列表最后一项
• 右键点击时索引加1，边界处理：索引超出列表长度时重置为0
• 根据更新后的索引切换展示内容

2. 代码示例 #

<!-- HTML结构 -->
<div class="item-container">
  <div id="current-item">项目1</div>
</div>

<script>
// 项目列表数据
const items = ["项目1", "项目2", "项目3", "项目4"];
let currentIndex = 0;
const currentItemEl = document.getElementById("current-item");

// 更新展示内容的通用函数
function updateDisplayItem() {
  currentItemEl.textContent = items[currentIndex];
}

// 左键点击触发回退
currentItemEl.addEventListener("click", () => {
  currentIndex = currentIndex - 1 < 0 ? items.length - 1 : currentIndex - 1;
  updateDisplayItem();
});

// 右键点击触发前进，同时阻止默认菜单弹出
currentItemEl.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  currentIndex = currentIndex + 1 >= items.length ? 0 : currentIndex + 1;
  updateDisplayItem();
});
</script>

3. 前端框架适配 #

• React：用useState管理currentIndex，在元素上绑定onClick和onContextMenu（后者需调用e.preventDefault()）
• Vue：在元素上绑定@click处理回退逻辑，@contextmenu.prevent处理前进逻辑，用data变量维护当前索引

二、可用依赖库 #

如果需要过渡动画、触摸兼容等扩展功能，可以选用以下成熟的轮播/内容切换库：

1. Swiper #

主流轮播库，支持自定义事件控制切换：

• 初始化时可禁用默认滑动，手动绑定左右键事件调用内置切换方法
• 核心配置示例：

const swiper = new Swiper('.swiper-container', {
  loop: true, // 开启循环切换
});

// 左键触发回退
document.querySelector('.swiper-container').addEventListener('click', () => {
  swiper.slidePrev();
});

// 右键触发前进
document.querySelector('.swiper-container').addEventListener('contextmenu', (e) => {
  e.preventDefault();
  swiper.slideNext();
});

2. Glide.js #

轻量级内容切换库，支持手动调用切换指令：

• 用go('<')实现回退，go('>')实现前进
• 核心代码示例：

const glide = new Glide('.glide-container').mount();

// 左键回退
document.querySelector('.glide-container').addEventListener('click', () => {
  glide.go('<');
});

// 右键前进
document.querySelector('.glide-container').addEventListener('contextmenu', (e) => {
  e.preventDefault();
  glide.go('>');
});

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