当前位置： 文江博客话题详情

jQuery Carousel 插件点击时滚动到第一个项目

发布于 2024-10-07 01:34:28 字数 293 浏览 4 评论 0原文

我正在使用这个 jQuery 插件： http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm< /a> 创建垂直轮播。

我想做一些类似于分页的事情，单击按钮并滚动到相应的框架。但我只想要一个按钮。该按钮将出现在最后一帧之后，并且显示为“返回顶部”。单击时，它将滚动到轮播中的第一项。有人知道我如何轻松触发此事件吗？

原文

I am using this jQuery plugin: http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm to create 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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

染火枫林 2024-10-14 01:34:28

我写了以下内容，我认为这就是您想要实现的目标。

<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 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>
回复 原文
清泪尽 2024-10-14 01:34:28

我想你想要 jquery scrollTo 插件：
http://demos.flesler.com/jquery/localScroll/#section1

链接下载插件位于该页面的右侧。

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.

回复 原文
~没有更多了~

关于作者

怎言笑

暂无简介

0 文章
0 评论
665 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文