Ссылка на конкретный слайд в карусели с помощью Javascript / CSS / HTML

Question

Были и другие вопросы, похожие на этот, но ответы всегда относятся к конкретному коду JQuery, который я не использую. Вместо этого я использую здесь пример слайд-шоу W3Schools:

http://www.w3schools.com/howto/howto_js_slideshow.asp

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

Последнее, что я пробовал, это следующее:

ССЫЛКА на отдельной странице:

<a href="slideshow.html#currentSlide(3)">

Пунктирные ссылки под слайд-шоу на slideshow.html (не мог придумать, на что еще ссылаться):

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
   <span class="dot" onclick="currentSlide(4)"></span>
  <span class="dot" onclick="currentSlide(5)"></span>
  <span class="dot" onclick="currentSlide(6)"></span>
</div>

И javascript, который якобы сообщает слайд-шоу, что загружать, на основе хеша:

if (location.hash)
{
    $('#' + location.hash.substring(1)).click();
}

Наверное, глупая идея, но я относительно новичок в этом деле и у меня нет идей.

javascript html hyperlink slideshow hashtag

0

Nathan R 15 Июн 2016 в 08:25

Answer 1

Вы почти получили это, но у вас есть одна проблема. Ваш сценарий, который определяет, какой элемент отображать, ссылается на несуществующий элемент. Вы написали:

$('#' + location.hash.substring(1)).click();

Что будет примерно так:

$('#currentSlide(1)').click();

Это указывает jQuery нацеливаться на элемент с id=currentSlide(1), которого нет на вашей странице.

Вместо этого я бы порекомендовал называть ваши URL-фрагменты только индексом изображения, которое вы хотите показать, например:

<a href="slideshow.html#0">Image 1</a>
<a href="slideshow.html#1">Image 2</a>
<a href="slideshow.html#2">Image 3</a>

Затем на странице slideshow.html используйте эту команду для запуска события клика:

$(document).ready(function() {
  if (location.hash) {
    var hash = location.hash.slice(1);
    $(".dot").eq(hash).click();
  }
});

Это будет искать dot класс в указанном индексе и щелкнуть этот элемент.

0

Dave 17 Июн 2016 в 01:02

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

–

Nathan R

17 Июн 2016 в 01:15

Я думаю, что вам не хватает обертывания кода внутри события загрузки документа. document.addEventListener ('DOMContentLoaded', function () {// здесь ваш js}, false);

–

Bellu

17 Июн 2016 в 01:20

Я ничего не делал, чтобы изменить то, что отображается, все, что я сделал, это изменил ваш JavaScript. Не могли бы вы прояснить, в чем именно проблема, с которой вы сейчас столкнулись? У вас есть ошибки консоли?

–

Dave

17 Июн 2016 в 06:20

Answer 2

Вы можете сделать что-то вроде этого:

if(location.hash){
     //assuming you have a hash like this -> slide1
     var slide =  location.hash;
     var slideNumber = slide.replace("#slide","");
     currentSlide(slide);
}

0

Bellu 17 Июн 2016 в 01:08

Я пробовал это, но это приводит меня на страницу слайд-шоу без слайдов. Это просто точки без картинки над ними.

–

Nathan R

17 Июн 2016 в 01:14

Ссылка на конкретный слайд в карусели с помощью Javascript / CSS / HTML

2 ответа

Похожие вопросы

Новые вопросы

javascript