Lien vers une diapositive spécifique dans le carrousel avec JavaScript/CSS/HTML

Question

Il y a eu d'autres questions similaires, mais les réponses concernent toujours le code JQuery spécifique que je n'utilise pas. Au lieu de cela, je suis en utilisant l'exemple W3Schools Diaporama ici:

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

J'ai des liens sur une page différente, et je voudrais chacun de ces liens pour ouvrir la page de diaporama sur une diapositive spécifique.

La chose la plus récente j'ai essayé est la suivante:

LINK à la page séparée:

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

liens Dot sous le diaporama sur slideshow.html (ne pouvait pas penser à quelque chose d'autre à créer un lien vers) :

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

Et javascript qui dit soi-disant le diaporama quoi charge basé sur le hachage:

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

Probablement une idée stupide, mais je suis relativement nouveau à ce genre de choses et je suis à court d'idées.

Answer 1

Vous l'avez presque compris, mais vous avez un problème. Votre script qui gère l'élément à afficher référence un élément qui n'existe pas. Vous avez écrit:

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

qui va évaluer à quelque chose comme ceci:

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

Cela dit jQuery pour cibler un élément avec id=currentSlide(1), qui n'existe pas sur votre page.

Ce que je recommande à la place est de nommer vos fragments d'URL avec juste l'index de l'image que vous voulez montrer, comme ceci:

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

Puis, dans l'utilisation de la page slideshow.html cette commande pour déclencher l'événement de clic :

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

cela va chercher la dot classe at the index provided, et cliquez sur cet élément.

Answer 2

Vous pouvez faire quelque chose comme ceci:

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