slideshow - return to 1st image [duplicate]_问答_开发者

slideshow - return to 1st image [duplicate]

开发者 https://www.devze.com 2023-03-01 21:44 出处：网络

This question already has answers here: Return to 1st image on slideshow (2 answers) Closed 2 years ago.

This question already has answers here: Return to 1st image on slideshow (2 answers) Closed 2 years ago.

does anyone know how to add another button to this slideshow that takes the user back to the first image at any given point during the slideshow?

http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

Any hel开发者_开发知识库p on this would be really appreciated.

Thanks!!

Assuming your following the code in the example you provided, something like this should work:

<script type="text/javascript>
$(document).ready(function(){

    $('#btnGoFirstSlide').click(function(){
        //hide all
        $('#slideshow-holder .slideshow-content').hide();

        //show the first one :)
        $('#slideshow-holder .slideshow-content:eq(0)').show();
    });

});
</script>
<body>
    <div id="slideshow-area">
      <div id="slideshow-scroller">
        <div id="slideshow-holder">
          <div class="slideshow-content">
            <img src="eureka_small.jpg" />
          </div>
          <div class="slideshow-content">
            <img src="wallace_gromit_small.jpg" />
          </div>
          <div class="slideshow-content">
            <img src="dead_like_me_small.jpg" />
          </div>
        </div>
      </div>
      <div id="slideshow-previous"></div>
      <div id="slideshow-next"></div>
    </div>

    <a id="btnGoFirstSlide" href="#">Go to First Slide</a>
</body>

Also, if you want to use the built-in animation to go to the first slide try to calculate the ScrollAmount and call the function in the click event:

$("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);