链接到特定的幻灯片

Question

我在一个页面上有一个幻灯片放映，我想在另一个网页上创建一个按钮，可以将用户导航到特定的幻灯片。该按钮与幻灯片放映不在同一页面上，我可以弄清楚如何实现。我曾尝试寻找解决方案，但大多数都使用与我不同的旋转式幻灯片。任何帮助将不胜感激。

HTML

<div class="slider">
  <div class="mySlides fade" data-timeout="5000">
    <div class="intro">
      <img src="image/logoGeo.png">
      <h1>Geo Millennium Sdn Bhd</h1>
      <div class="tips">
        <h2>Tips on How to Use This Slideshow:</h2>
        <p>Click on the title in each slides to view more about the services we provide.</p>
      </div>
    </div>
  </div>
  <div id="slide1" class="mySlides fade" data-timeout="5000">
    <a href="webpage/RetainingWall.html"><div class="para"><p>Retaining Wall</p></div></a>
    <img src="image/wall3.jpg">
  </div>
  <div class="mySlides fade" id="slide2" data-timeout="5000">
    <a href="webpage/SlopeRepair.html"><div class="para"><p>Slope Repair</p></div></a>
    <img src="image/slope8.jpg">
  </div>
  <div class="mySlides fade" id="slide3" data-timeout="5000">
    <a href="webpage/SteepSlopes.html"><div class="para"><p>Steep Slopes</p></div></a>
    <img src="image/stepslope1.jpg">
  </div>
  <div class="mySlides fade" id="slide4" data-timeout="5000">
    <a href="webpage/SlopeProtection.html"><div class="para"><p>Slope Protection</p></div></a>
    <img src="image/image2.jpg">
  </div>
  <div class="mySlides fade" id="slide5" data-timeout="5000">
    <a href="webpage/ReliefStructure.html"><div class="para"><p>Relief Structure</p></div></a>
    <img src="image/reliefstructure3.jpg">
  </div>
  <div class="mySlides fade" id="slide6" data-timeout="5000">
    <a href="webpage/SoilNailing.html"><div class="para"><p>Soil Nailing</p></div></a>
    <img src="image/soilnailing9.jpg">
  </div>
  <div class="mySlides fade" id="slide7" data-timeout="5000">
    <a href="webpage/REWall.html"><div class="para"><p>RE Wall</p></div></a>
    <img src="image/REWall1.jpeg">
  </div>

  <a class="previous" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
  <div class="navigator">
    <span class="indicator" onclick="currentSlide(1)"><h5>Home</h5></span>
    <span class="indicator" onclick="currentSlide(2)"><h5>Retaining Wall</h5></span>
    <span class="indicator" onclick="currentSlide(3)"><h5>Slope Repair</h5></span>
    <span class="indicator" onclick="currentSlide(4)"><h5>Steep Slopes</h5></span>
    <span class="indicator" onclick="currentSlide(5)"><h5>Slope Protection</h5></span>
    <span class="indicator" onclick="currentSlide(6)"><h5>Relief Structure</h5></span>
    <span class="indicator" onclick="currentSlide(7)"><h5>Soil Nailing</h5></span>
    <span class="indicator" onclick="currentSlide(8)"><h5>RE Wall</h5></span>
  </div>
</div>

Js

var slideIndex = 1;
var timer = null;
showSlides(slideIndex);

function showSlides(n){
var i;
var slides = document.getElementsByClassName("mySlides");
var indicators = document.getElementsByClassName("indicator");
if(n == undefined){
  n = ++slideIndex;
}
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 < indicators.length; i++){
  indicators[i].className = indicators[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display="block";
indicators[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 15000);
}
function plusSlides(n){
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n){
clearTimeout(timer);
showSlides(slideIndex = n);
}