如何通过点击“下一页”按钮轮播显示图片列表中的图像-html教程-PHP中文网

如何通过点击“下一页”按钮轮播显示图片列表中的图像

本文介绍如何使用原生 javascript 实现图片分页轮播：每次点击“下一页”按钮，页面上 4 张图片即刻更新为列表中下一组 4 个 url 对应的图像；到达末尾时自动循环回到开头。无需框架，代码简洁易懂，适合初学者快速上手。

本文介绍如何使用原生 javascript 实现图片分页轮播：每次点击“下一页”按钮，页面上 4 张图片即刻更新为列表中下一组 4 个 url 对应的图像；到达末尾时自动循环回到开头。无需框架，代码简洁易懂，适合初学者快速上手。

要实现一个支持循环滚动、每次展示 4 张图片的简易图库，核心在于：维护当前起始索引 + 按需批量更新 DOM 中 <img> 元素的 src 属性。整个流程无需刷新页面，响应迅速，且完全基于原生 HTML/CSS/JS，兼容所有现代浏览器。

✅ 完整可运行示例

以下是包含 HTML 结构、CSS 样式与 JavaScript 逻辑的一体化代码（复制保存为 .html 文件即可直接运行）：



  <meta charset="UTF-8"><title>图片轮播器（4图/页）</title><style>
    .images-container {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin: 20px 0;
      padding: 10px;
      background: #f9f9f9;
      border-radius: 6px;
    }
    .images-container img {
      width: 180px;
      height: 120px;
      object-fit: cover;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    #btn {
      padding: 10px 20px;
      font-size: 16px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }
    #btn:hover { background: #0056b3; }
  </style><h2>图片轮播器（每页 4 张）</h2>

<div class="images-container">
  <img id="image1" src="" alt="Image 1"><img id="image2" src="" alt="Image 2"><img id="image3" src="" alt="Image 3"><img id="image4" src="" alt="Image 4">
</div>

<button id="btn">下一页 →</button>

<script>
  // ? 替换为你自己的图片 URL 列表（支持任意长度）
  const imageUrls = [
    'https://picsum.photos/180/120?random=1',
    'https://picsum.photos/180/120?random=2',
    'https://picsum.photos/180/120?random=3',
    'https://picsum.photos/180/120?random=4',
    'https://picsum.photos/180/120?random=5',
    'https://picsum.photos/180/120?random=6',
    'https://picsum.photos/180/120?random=7',
    'https://picsum.photos/180/120?random=8',
    'https://picsum.photos/180/120?random=9',
    'https://picsum.photos/180/120?random=10'
  ];

  // DOM 元素引用
  const img1 = document.getElementById('image1');
  const img2 = document.getElementById('image2');
  const img3 = document.getElementById('image3');
  const img4 = document.getElementById('image4');
  const nextBtn = document.getElementById('btn');

  // 当前显示批次的起始索引（初始为 0）
  let currentIndex = 0;
  const batchSize = 4;

  // 加载当前批次图片（带循环逻辑）
  function loadBatch(startIndex) {
    const batch = [];
    for (let i = 0; i < batchSize; i++) {
      const idx = (startIndex + i) % imageUrls.length;
      batch.push(imageUrls[idx]);
    }
    return batch;
  }

  // 渲染当前批次
  function renderBatch() {
    const batch = loadBatch(currentIndex);
    img1.src = batch[0];
    img2.src = batch[1];
    img3.src = batch[2];
    img4.src = batch[3];
  }

  // 点击事件：更新索引并渲染
  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + batchSize) % imageUrls.length;
    renderBatch();
  });

  // 页面加载后立即显示第一页
  renderBatch();
</script>

? 关键说明与注意事项

循环机制：使用 (currentIndex + batchSize) % imageUrls.length 确保索引自动回绕，避免越界或手动判断边界。
健壮性增强：即使 imageUrls 数量不足 4 个（如只有 2 张），代码仍能安全运行（会重复显示已有图片），你也可根据需求添加空占位或提示逻辑。
性能友好：仅修改 src 属性，不重建 DOM 节点，无重排重绘压力。
可扩展建议：
- 添加「上一页」按钮：只需将 currentIndex 减去 batchSize，并用 (currentIndex + imageUrls.length) % imageUrls.length 处理负数；
- 支持键盘方向键（→ / ←）：监听 keydown 事件；
- 显示当前页码：例如 第 ${Math.floor(currentIndex / batchSize) + 1} 页（共 ${Math.ceil(imageUrls.length / batchSize)} 页）。

掌握这一模式后，你就能轻松构建相册预览、产品图集、广告横幅等常见轮播场景——逻辑清晰、维护简单、零依赖。