链接到另一个页面的特定幻灯片

Question

I have a slideshow in one of my pages and in each slide of the slideshow there is a link to any other pages of my websites. After navigating to other pages, there is a back button and a next button that can navigate users back to the slideshow. The problem is whenever I click the back button, the slideshow restart from the beginning. I want the slideshow to continue from the point where I stopped without having the slideshow to restart from the beginning every time i navigate to it.

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

 <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>

Answer 1

You are going to want to store that active slide index somewhere.

I suggest looking into utilizing Query Strings (examples: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams ) since you mentioned this can redirect to your different "websites" (ie, different domains).

Simply add a query string to your redirect link, for example:

<a href="http://mywebsite.com?activeSlide=2"></a>

Where 2 is the active slide on your page that contains the slider. When you go back to your page simply read the active slide Query String parameter using:

var urlParams = new URLSearchParams(window.location.search);

var slideIndex = urlParams.get('activeSlide'); // this is the active slide

// your current code below

var timer = null;
showSlides(slideIndex);

function showSlides(n) { ... }