Vanilla JS实现：基于前页点击项显示轮播指定图片

1. 统一第一页Box的跳转锚点 #

修改第一页所有.box的跳转链接，为每个链接添加对应序号的锚点，确保点击每个Box都能传递目标轮播项的标识：

<!-- 第一页代码示例 -->
<div class="box-container">
  <div class="box">
    <a href="carousel-page.html#1">
      <img src="img1.jpg" alt="图片1">
    </a>
  </div>
  <div class="box">
    <a href="carousel-page.html#2">
      <img src="img2.jpg" alt="图片2">
    </a>
  </div>
  <div class="box">
    <a href="carousel-page.html#3">
      <img src="img3.jpg" alt="图片3">
    </a>
  </div>
  <div class="box">
    <a href="carousel-page.html#4">
      <img src="img4.jpg" alt="图片4">
    </a>
  </div>
</div>

2. 第二页轮播的自动切换逻辑 #

原生JS自定义轮播实现 #

假设你的原生轮播结构如下，每个轮播项通过data-index标记对应序号：

<!-- 第二页轮播结构示例 -->
<div class="carousel">
  <div class="carousel-item active" data-index="1">
    <img src="img1.jpg" alt="图片1">
  </div>
  <div class="carousel-item" data-index="2">
    <img src="img2.jpg" alt="图片2">
  </div>
  <div class="carousel-item" data-index="3">
    <img src="img3.jpg" alt="图片3">
  </div>
  <div class="carousel-item" data-index="4">
    <img src="img4.jpg" alt="图片4">
  </div>
</div>

添加以下JS代码，监听页面加载和锚点变化，自动切换到对应轮播项：

function switchCarouselByHash() {
  const targetIndex = window.location.hash.slice(1);
  if (!targetIndex) return;

  // 移除所有轮播项的激活状态
  document.querySelectorAll('.carousel-item').forEach(item => {
    item.classList.remove('active');
  });

  // 激活目标轮播项
  const targetItem = document.querySelector(`.carousel-item[data-index="${targetIndex}"]`);
  if (targetItem) {
    targetItem.classList.add('active');
  }
}

// 页面加载时执行切换
window.addEventListener('load', switchCarouselByHash);
// 监听锚点变化，支持手动修改锚点时自动切换
window.addEventListener('hashchange', switchCarouselByHash);

Bootstrap Carousel 框架实现 #

如果使用Bootstrap自带的轮播组件，结构如下：

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-slide-to="0">
      <img src="img1.jpg" class="d-block w-100" alt="图片1">
    </div>
    <div class="carousel-item" data-bs-slide-to="1">
      <img src="img2.jpg" class="d-block w-100" alt="图片2">
    </div>
    <div class="carousel-item" data-bs-slide-to="2">
      <img src="img3.jpg" class="d-block w-100" alt="图片3">
    </div>
    <div class="carousel-item" data-bs-slide-to="3">
      <img src="img4.jpg" class="d-block w-100" alt="图片4">
    </div>
  </div>
</div>

对应的JS代码，利用Bootstrap的Carousel实例完成切换：

document.addEventListener('DOMContentLoaded', function() {
  const carousel = new bootstrap.Carousel(document.getElementById('carouselExample'));
  // 转换为Bootstrap的0起始索引
  const targetIndex = parseInt(window.location.hash.slice(1)) - 1;

  if (!isNaN(targetIndex) && targetIndex >= 0 && targetIndex < 4) {
    carousel.to(targetIndex);
  }

  // 监听锚点变化
  window.addEventListener('hashchange', function() {
    const newIndex = parseInt(window.location.hash.slice(1)) - 1;
    if (!isNaN(newIndex) && newIndex >= 0 && newIndex < 4) {
      carousel.to(newIndex);
    }
  });
});

核心逻辑说明 #

• 第一页通过锚点传递目标轮播项的序号，无需额外页面
• 第二页通过监听load和hashchange事件，解析锚点值后切换到对应轮播项
• 所有轮播内容集中在同一个页面，通过锚点控制显示状态

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