使用Javascript / CSS / HTML链接到轮​​播中的特定幻灯片

Question

还有其他类似的问题，但答案总是与我没有使用的特定JQuery代码有关。相反，我在这里使用W3Schools幻灯片示例：

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

我在其他页面上有链接，我希望每个链接都能在特定幻灯片上打开幻灯片页面。

我最近尝试的是：

单独页面上的链接：

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

幻灯片放映幻灯片下的点链接（无法想到要链接的任何内容）：

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

可能是一个愚蠢的想法，但我对这些东西相对较新并且没有想法。

Answer 1

你几乎得到了它，但你有一个问题。处理要显示的项目的脚本引用了一个不存在的元素。你写道：

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

将评估类似的内容：

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

告诉jQuery使用id=currentSlide(1)定位一个元素，该元素在您的网页上不存在。

我建议改为使用您要显示的图像的索引来命名您的网址片段，如下所示：

<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页面中使用此命令触发click事件：

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

这会查找dot类at the index provided，然后点击该元素。

Answer 2

你可以这样做：

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