【解決方法】別のページから特定のスライドへのリンク

[ad_1]

私のページの 1 つにスライドショーがあり、スライドショーの各スライドには、私の Web サイトの他のページへのリンクがあります。他のページに移動した後、ユーザーをスライドショーに戻すことができる[戻る]ボタンと[次へ]ボタンがあります。問題は、戻るボタンをクリックするたびに、スライドショーが最初から再開されることです。移動するたびにスライドショーを最初から再開せずに、停止した時点からスライドショーを続行したい。

私が試したこと：

Javascript

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);
}

HTML

<div class="container">
  <div class="slider">
    <div class="mySlides fade" id="slide1" 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="slide2" 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="slide3" 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="slide4" 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="slide5" 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="slide6" 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="slide7" 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="slide8" 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)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</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>
</div>

解決策 1

戻るリンクにターゲットスライドの ID を URL に追加させます。

HTML

<a href="index.html#slide3">Back</a>

次に使用しますの location.hash 財産[^] どのスライドから開始するかを決定するには:

JavaScript

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

function getInitialSlideIndex(){
    var index = 1;
    
    var hash = location.hash;
    if (hash) {
        var slideId = hash.substr(1);
        var slides = document.getElementsByClassName("mySlides");
        for (var i = 0; i < slides.length; i++){
            if (slides[i].id === slideId) {
                index = i + 1;
                break;
            }
        }
    }
    
    return index;
}