如何用原生JavaScript实现菜单链接跳转至轮播图指定幻灯片

我正在搭建作品集网站，做了个简易轮播图，已经实现了Prev/Next按钮切换功能。现在想加个菜单，点击菜单链接能直接跳到对应幻灯片，打算把URL哈希和幻灯片ID绑定，但不知道怎么实现通过URL加载对应幻灯片，求技术建议。

现有JavaScript代码如下：

var prev = document.querySelector(".prev");
var next = document.querySelector(".next");

var slideIndex = 1;

showSlides(slideIndex);

prev.addEventListener("click", function(){
  plusSlides(-1)
});
next.addEventListener("click", function(){
  plusSlides(1)
});

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {

  var i;
  var slides = document.getElementsByClassName("slide");

  if (n > slides.length) {slideIndex = 1}

    if (n < 1) {slideIndex = slides.length}

      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        slides[i].classList.remove("slideactive");
      }

      slides[slideIndex-1].style.display = "grid";
      slides[slideIndex-1].classList.add("slideactive");
      window.location.hash = slides[slideIndex-1].id;
      console.log(window.location.hash);
  
} // end function showSlides

1. 编写菜单HTML结构 #

给每个幻灯片对应一个菜单链接，href设为幻灯片的ID（即哈希值）：

<ul class="slide-menu">
  <li><a href="#slide1">幻灯片1</a></li>
  <li><a href="#slide2">幻灯片2</a></li>
  <li><a href="#slide3">幻灯片3</a></li>
  <!-- 对应所有幻灯片 -->
</ul>

2. 新增通过哈希定位幻灯片的函数 #

写一个函数，根据当前URL的哈希值找到对应的幻灯片，并更新slideIndex：

function goToSlideByHash() {
  var hash = window.location.hash.slice(1); // 去掉#号
  var slides = document.getElementsByClassName("slide");
  
  // 遍历幻灯片，找到匹配ID的项
  for (var i = 0; i < slides.length; i++) {
    if (slides[i].id === hash) {
      slideIndex = i + 1; // 因为slideIndex从1开始
      showSlides(slideIndex);
      return;
    }
  }
  // 如果哈希无效，默认显示第一张
  slideIndex = 1;
  showSlides(slideIndex);
}

3. 页面加载时触发哈希检测 #

替换原来的showSlides(slideIndex);，初始化时调用哈希检测函数：

goToSlideByHash();

4. 监听哈希变化事件 #

当用户点击菜单链接或手动修改URL哈希时，自动切换幻灯片：

window.addEventListener("hashchange", goToSlideByHash);

5. 同步菜单激活状态 #

在showSlides函数末尾加一段代码，给当前选中的菜单链接加激活样式：

// 同步菜单激活状态
var menuLinks = document.querySelectorAll(".slide-menu a");
menuLinks.forEach(function(link) {
  link.classList.remove("active");
  if (link.getAttribute("href") === window.location.hash) {
    link.classList.add("active");
  }
});

完整修改后的代码示例 #

var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var slideIndex = 1;

// 初始化时根据哈希加载幻灯片
goToSlideByHash();

prev.addEventListener("click", function(){
  plusSlides(-1)
});
next.addEventListener("click", function(){
  plusSlides(1)
});

// 监听哈希变化
window.addEventListener("hashchange", goToSlideByHash);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");

  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].classList.remove("slideactive");
  }

  slides[slideIndex-1].style.display = "grid";
  slides[slideIndex-1].classList.add("slideactive");
  window.location.hash = slides[slideIndex-1].id;

  // 同步菜单激活状态
  var menuLinks = document.querySelectorAll(".slide-menu a");
  menuLinks.forEach(function(link) {
    link.classList.remove("active");
    if (link.getAttribute("href") === window.location.hash) {
      link.classList.add("active");
    }
  });
}

function goToSlideByHash() {
  var hash = window.location.hash.slice(1);
  var slides = document.getElementsByClassName("slide");
  
  for (var i = 0; i < slides.length; i++) {
    if (slides[i].id === hash) {
      slideIndex = i + 1;
      showSlides(slideIndex);
      return;
    }
  }
  // 哈希无效时默认显示第一张
  slideIndex = 1;
  showSlides(slideIndex);
}

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