如何在我自己的 Slider 中創建指向特定幻燈片的鏈接？

Question

我已經構建了一個非常簡單的 slider，我想知道是否可以在這個中為每張幻燈片創建一個特定的鏈接。 目前，每張幻燈片都有相同的鏈接，但理想情況下，我希望在末尾添加一個數字以創建一個針對特定幻燈片的鏈接，例如：

www.mydomain.fr/sliderpage#2 （其中 #... 是特定幻燈片的特定數字）

這是我的代碼：

HTML

    <div class="slideshow-container">
  <div class="mySlides">
    <div class="numbertext">1 / 4</div>
    <img src="thumbs/peintures/img1.jpg" style="width: 100%;">
    <div class="text"><i>Babel II</i>, 2017, technique mixte sur toile, 100 × 100 cm</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 4</div>
    <img src="thumbs/peintures/img2.jpg" style="width: 100%;">
    <div class="text"><i>Ange musicien I</i>, 2016, technique mixte sur toile, 60 × 40 cm</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 4</div>
    <img src="thumbs/peintures/img3.jpg" style="width: 100%;">
    <div class="text"><i>Silence</i>, 2014, technique mixte sur toile, 140 × 140 cm</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">4 / 4</div>
    <img src="thumbs/peintures/img1.jpg" style="width: 100%;">
    <div class="text"><i>Oasis</i> 2014, technique mixte sur toile, 140 × 140 cm</div>
  </div>

  <img src="assets/prev.png" class="prev" onclick="plusSlides(-1)"></img>
  <img src="assets/next.png" class="next" onclick="plusSlides(1)"></img>
</div>

JS

  var slideIndex = 1;
  showSlides(slideIndex);

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

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length};
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].classList.remove("active");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].classList.add("active");
  }

非常感謝社區（對不起，如果這是一個愚蠢的問題，我真的是菜鳥，找不到解決方法）

Answer 1

我可以想到兩種方法，

• 將幻燈片包裹在錨標記中並直接添加鏈接。

<div class="mySlides">
    <a href="yourLink/<path>" rel="noreferrer noopener" target="_blank">
      <div class="numbertext">1 / 4</div>
      <img src="thumbs/peintures/img1.jpg" style="width: 100%;">
      <div class="text"><i>Babel II</i>, 2017, technique mixte sur toile, 100 × 100 cm</div>
    </a>
  </div>

  <div class="mySlides">
    <a href="yourLink/<path>" rel="noreferrer noopener" target="_blank">
     <div class="numbertext">2 / 4</div>
     <img src="thumbs/peintures/img2.jpg" style="width: 100%;">
     <div class="text"><i>Ange musicien I</i>, 2016, technique mixte sur toile, 60 × 40 cm</div>
    </a>
  </div>

• 將點擊監聽器添加到您的幻燈片容器並使用它打開鏈接

 // add data attribute in HTML
 <div class="mySlides" data-link="<linkId>"> </div> 
 
 const container = document.querySelector('.slideshow-container');
 container.addEventListener('click', (e) => {
    const slide = e.target;
    const slideLink = slide.getAttribute('data-link');
    if (slideLink) {
      window.open(slideLink, '_blank');
    }
 })

我更喜歡第一種方法，因為它更語義化。 在第二種方法中，您可能必須循環直到到達帶有data-的節點，因為單擊事件也可能發生在嵌套的子節點上。

此外，您可以緩存查詢的 DOM 元素，而不是每次showSlides時再次查詢整個 DOM。

// query the DOM once and reuse them
const slides = document.querySelector(".mySlides");
const dots = document.querySelector(".dot");

let slideIndex = 1;
showSlides()

我誤解了這個問題。 上面只會為每張幻燈片添加一個鏈接。 不過，問題其實是想問——

如何將位置 hash 與每張幻燈片關聯？

• 首先，為每張幻燈片添加一個唯一的 ID，

<div class="mySlides" id="titre1">
      <div class="numbertext">1 / 4</div>
      <img src="thumbs/peintures/img1.jpg" style="width: 100%;">
      <div class="text"><i>Babel II</i>, 2017, technique mixte sur toile, 100 × 100 cm</div>
  </div>

  <div class="mySlides" id="titre2">
     <div class="numbertext">2 / 4</div>
     <img src="thumbs/peintures/img2.jpg" style="width: 100%;">
     <div class="text"><i>Ange musicien I</i>, 2016, technique mixte sur toile, 60 × 40 cm</div>
  </div>

• 修改showSlides方法以在更改幻燈片時更新 window 位置

function showSlides() {
 ...
  for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active");
  window.location.hash = slides[slideIndex-1].id;
}

現在，在每次幻燈片更改時，url 也將更新。

為了顯示當前幻燈片，每當您直接在url/#slideId上導航時，我們必須首先在腳本加載時從 url 中獲取 hash 片段，然后相應地更新 slideIndex

  let slideIndex = 1;
  const slideToLoad = window.location.hash.split(1);
  const allSlides = document.querySelectorAll(".mySlides");

  if (slideToLoad) {
     for(let slide=0; slide < allSlides.length; slide++) {
         // we find the slide with the id and assign the index to slideIndex
         if(allSlides[slide].id === slideToLoad) { 
              slideIndex = slide; 
              return;
         }
     }

  }