slideshow - return to 1st image [duplicate]
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);
加载中,请稍侯......
精彩评论