jQuery Carousel plugin scroll to first item on click
I am using this jQuery plugin: http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm to crea开发者_C百科te a vertical carousel.
I would like to do something similar to the pagination, where a button is clicked and the corresponding frame is scrolled to. But I want only one button. This button will come after the last frame, and it will read "back to top." When it is clicked, it will scroll to the first item in the carousel. Anyone know how I can easily trigger this event?
I wrote the following, which I think is what you're trying to achieve.
<html>
<head>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel(
{
vertical: true,
scroll: 1
});
// Loop through all images and attach click action
jQuery("#mycarousel img").each( function(index, element)
{
$(element).click( function()
{
jQuery('#mycarousel').jcarousel('scroll', index + 1);
});
});
});
</script>
</head>
<body>
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</body>
</html>
I think you want the jquery scrollTo plugin: http://demos.flesler.com/jquery/localScroll/#section1
The link to download the plugin is on the right of that page.
加载中,请稍侯......
精彩评论