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

Question

There have been other questions similar to this, but the answers always pertain to specific JQuery code that I'm not using. Instead, I'm using the W3Schools Slideshow example here:

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

I have links on a different page, and I'd like each of those links to open the slideshow page on a specific slide.

The most recent thing I tried is this:

LINK on separate page:

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

Dot links under the slideshow on slideshow.html (couldn't think of anything else to link to):

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

And javascript that supposedly tells the slideshow what to load based on the hash:

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

Probably a dumb idea, but I'm relatively new to this stuff and am out of ideas.

Answer 1

You've almost got it, but you've got one issue. Your script that handles which item to show references an element that doesn't exist. You wrote:

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

Which is going to evaluate to something like this:

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

That tells jQuery to target an element with id=currentSlide(1) , which doesn't exist on your page.

What I would recommend instead is to name your URL fragments with just the index of the image you want to show, like this:

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

Then in the slideshow.html page use this command to trigger the click event:

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

That will look for the dot class at the index provided , and click that element.

Answer 2

You could do something like this:

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