如何添加Next/Previous按钮？实现图片与文件并排查看的便捷切换

核心思路 #

维护当前内容的索引，点击按钮时更新索引，同步切换图片元素的src和文件内容区域的显示内容（或文件路径），同时处理边界情况（比如索引超出范围时循环切换或禁用按钮）。

完整代码示例 #

HTML结构

<div class="container">
  <!-- 图片展示区 -->
  <div class="image-area">
    <img id="current-img" src="img-1.png" alt="当前图片">
  </div>
  <!-- 文件内容区 -->
  <div class="doc-area">
    <div id="current-doc">这是与第一张图片对应的文件内容</div>
  </div>
</div>

<!-- 切换按钮组 -->
<div class="nav-controls">
  <button id="prev-btn">Previous</button>
  <button id="next-btn">Next</button>
</div>

CSS样式（实现并排布局）

.container {
  display: flex;
  gap: 25px;
  margin: 20px 0;
  align-items: flex-start;
}

.image-area img {
  max-width: 450px;
  height: auto;
  border: 1px solid #eee;
}

.doc-area {
  flex: 1;
  padding: 15px;
  border: 1px solid #ddd;
  min-height: 300px;
}

.nav-controls button {
  padding: 10px 20px;
  margin-right: 12px;
  cursor: pointer;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
}

.nav-controls button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

JavaScript逻辑

// 存储图片与文件的对应关系，按需扩展内容
const contentPairs = [
  {
    imgSrc: "img-1.png",
    docContent: "这是与第一张图片对应的文件内容"
  },
  {
    imgSrc: "img-2.png",
    docContent: "这是与第二张图片对应的文件内容"
  },
  {
    imgSrc: "img-3.png",
    docContent: "这是与第三张图片对应的文件内容"
  }
];

// 获取DOM元素
const currentImg = document.getElementById('current-img');
const currentDoc = document.getElementById('current-doc');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

// 当前内容索引，初始指向第一个
let currentIdx = 0;

// 更新显示内容的通用函数
function refreshContent() {
  const activeItem = contentPairs[currentIdx];
  currentImg.src = activeItem.imgSrc;
  currentImg.alt = `第${currentIdx + 1}张图片`;
  currentDoc.textContent = activeItem.docContent;
  
  // 可选：根据索引状态切换按钮禁用状态
  prevBtn.disabled = currentIdx === 0;
  nextBtn.disabled = currentIdx === contentPairs.length - 1;
}

// Previous按钮点击事件
prevBtn.addEventListener('click', () => {
  if (currentIdx > 0) {
    currentIdx--;
    refreshContent();
  }
});

// Next按钮点击事件
nextBtn.addEventListener('click', () => {
  if (currentIdx < contentPairs.length - 1) {
    currentIdx++;
    refreshContent();
  }
});

// 初始化加载第一个内容
refreshContent();

扩展说明 #

• 循环切换需求：如果需要点击Previous到第一个时跳转到最后一个，点击Next到最后一个时跳转到第一个，可修改按钮事件逻辑为：

  prevBtn.addEventListener('click', () => {
    currentIdx = (currentIdx - 1 + contentPairs.length) % contentPairs.length;
    refreshContent();
  });
  
  nextBtn.addEventListener('click', () => {
    currentIdx = (currentIdx + 1) % contentPairs.length;
    refreshContent();
  });
  

• 文件类型扩展：如果需要展示PDF、Word等文档，可将docContent改为文件URL，把文件内容区替换为iframe：

  <iframe id="current-doc" src="doc-1.pdf" width="100%" height="500px"></iframe>
  

  对应JS更新逻辑：currentDoc.src = activeItem.docUrl;

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