如何从index.html跳转至page.html中StackSlider的指定幻灯片？

我来帮你搞定这个问题——你之前的思路没问题，但StackSlider这类JS驱动的轮播插件不会自动识别锚点并切换到对应幻灯片，必须主动调用它的API来完成跳转。下面分两步具体实现：

1. 调整index.html的链接，传递目标幻灯片的标识 #

先把链接改成能明确传递目标幻灯片信息的格式，两种方式选一个就行：

方式一：用锚点传递索引（推荐，更直观） #

注意多数轮播插件的幻灯片索引是从0开始的，比如第1张对应0，第3张对应2，第4张对应3：

<body>
  <a href="page.html#slide=0">go to 1st slide of page.html</a>
  <a href="page.html#slide=2">go to 3rd slide of page.html</a>
  <a href="page.html#slide=3">go to 4th slide of page.html</a>
</body>

方式二：用你的li id传递 #

如果你想保留原来的#one、#two这类锚点，也可以继续用：

<body>
  <a href="page.html#one">go to 1st slide of page.html</a>
  <a href="page.html#two">go to 3rd slide of page.html</a>
</body>

2. 在page.html中添加逻辑，触发幻灯片跳转 #

首先确保你已经正确初始化了StackSlider，然后添加代码读取URL里的目标信息，调用插件的切换方法。

先确认StackSlider的初始化（参考你的配置） #

假设你的初始化代码是这样的（具体配置按你的需求来）：

// 初始化StackSlider，获取实例对象
const slider = new StackSlider('.main ul', {
  // 你的插件配置项，比如 animationSpeed: 500, loop: true 等
});

情况一：用锚点传递索引的处理代码 #

添加以下代码，在页面加载完成后读取锚点并跳转：

// 从URL锚点中提取目标幻灯片索引
function getTargetSlideIndex() {
  const hash = window.location.hash;
  if (hash.startsWith('#slide=')) {
    const index = parseInt(hash.split('=')[1], 10);
    return isNaN(index) ? null : index;
  }
  return null;
}

// 页面加载完成后执行跳转
window.addEventListener('load', () => {
  const targetIndex = getTargetSlideIndex();
  if (targetIndex !== null) {
    // 调用StackSlider的切换方法，通常是goToSlide（具体看插件文档）
    // 如果插件索引从1开始，就改成 targetIndex + 1
    slider.goToSlide(targetIndex);
  }
});

情况二：用li id传递的处理代码 #

如果用的是#one这类锚点，就用下面的代码来获取对应幻灯片的索引：

// 从锚点id获取目标幻灯片的索引
function getTargetSlideFromId() {
  const targetId = window.location.hash.slice(1); // 去掉开头的#
  if (!targetId) return null;
  
  const targetLi = document.getElementById(targetId);
  if (!targetLi) return null;
  
  // 把ul下的li转换成数组，找到目标li的索引
  const slides = Array.from(targetLi.parentElement.children);
  return slides.indexOf(targetLi);
}

// 页面加载完成后执行跳转
window.addEventListener('load', () => {
  const targetIndex = getTargetSlideFromId();
  if (targetIndex !== null) {
    slider.goToSlide(targetIndex);
  }
});

关键注意点 #

• 一定要确保StackSlider已经完全初始化完成后再调用跳转方法，所以放在window.load事件里或者插件提供的onInit回调中（如果有的话）会更稳妥，避免出现插件还没加载好就调用方法的错误。
• 不同版本的StackSlider可能切换方法名不一样，比如有的叫slideTo而不是goToSlide，如果上面的方法不行，记得查插件的官方文档确认正确的方法名。

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