Member 14885909 Ответов: 1

Ссылка на конкретный слайд с другой страницы

У меня есть слайд-шоу на одной из моих страниц, и в каждом слайде слайд-шоу есть ссылка на любые другие страницы моих веб-сайтов. После перехода на другие страницы есть кнопка "назад" и кнопка "Далее", которые позволяют пользователям вернуться к слайд-шоу. Проблема в том, что всякий раз, когда я нажимаю кнопку Назад, слайд-шоу перезапускается с самого начала. Я хочу, чтобы слайд-шоу продолжалось с того места, где я остановился, без необходимости перезапускать слайд-шоу с самого начала каждый раз, когда я перехожу к нему.

Что я уже пробовал:

Язык 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>

Andre Oosthuizen

Не уверен, что это поможет, принудительная перезагрузка, кажется, запоминает положение страницы, возможно, вы можете использовать это, чтобы показать правильное изображение слайда, а также - Обновите страницу и сохраните положение прокрутки

1 Ответов

Рейтинг:
1

Richard Deeming

Имеют обратную ссылку Добавить код целевой слайд, чтобы URL-адрес:

<a href="index.html#slide3">Back</a>
Тогда использовать то location.hash собственность[^] чтобы определить, с какого слайда начать:
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;
}

Member 14885909

@Richard Deeming я попробовал решение ur, но каким-то образом оно заставляет мое слайд-шоу пропускать некоторые слайды.

Richard Deeming

Конечно, это так. Если вы хотите запустить слайд-шоу на слайде 3, он должен пропустить слайды 1 и 2.

Member 14885909

нет я имею в виду после этого

Member 14885909

как будто он может начаться на слайде 3, но он переходит к слайду 5

Richard Deeming

Не на основе кода, который вы опубликовали. Все что ты делаешь это меняешь начало slideIndex; нет ничего, что заставило бы его пропустить два слайда сразу.

Member 14885909

Вот почему я думаю, что это странно. Ваш код включает в себя только именование идентификатора, но каким-то образом это влияет на слайды

Richard Deeming

Вот демо-версия, с таймером уменьшенным, чтобы его было легче увидеть, и стартовым слайдом, жестко закодированным, чтобы быть slide3:
Edit fiddle - JSFiddle - Code Playground[^]

Как вы можете видеть, никакие слайды не пропущены.

Member 14885909

Может быть, вы попробуете перейти по ссылке? Мой происходит после нажатия на ссылку на слайд 3.

Richard Deeming

Вы пробовали перейти по ссылке в демо-версии, которую я опубликовал? Он по-прежнему не пропускает никаких слайдов.

В вашем коде должно быть что-то, чего вы здесь не показали.

Member 14885909

Может быть, вам нужно попробовать поставить ссылку и попробовать ее. Шахта работает плавно, прежде чем нажать на ссылку.

Member 14885909

ждать. Я думаю, вы неправильно поняли мой вопрос. Я хочу, чтобы слайд плавно переходил от слайда 1 к слайду 8. Однако, когда я нажимаю кнопку на слайде 2, которая ссылается на другую страницу. На этой странице есть кнопка назад и далее, которая при нажатии кнопки назад возвращается ко 2-му слайду слайд-шоу, а при следующем нажатии-к слайду 3. Понял, что я имею в виду?

Richard Deeming

Так что ты переезжаешь в другое место слайды а не разные страницы?

Member 14885909

Да

Member 14885909

То, что вы сделали, на самом деле правильно, за исключением слайда 1 и слайда 2, которые не отображаются, вам удалось перейти к слайду 3 при нажатии кнопки Назад, просто этот слайд 1 и слайд 2 не отображаются на протяжении всего слайд-шоу.

Member 14885909

Я хочу, чтобы слайд-шоу показывало Слайд 1 и 2 после слайда 8, но все же при нажатии кнопки назад я могу сразу перейти к слайду 3, а не перезапускать все слайды.