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

可能是个愚蠢的主意，但我对这些东西还比较陌生，并且没有主意。

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

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

这将在提供的索引处查找dot类，然后单击该元素。

Answer 2

您可以执行以下操作：

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