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

jquery 将单击的列表项移动到列表轮播中的第一个可见项

发布于 2024-10-15 23:18:27 字数 264 浏览 5 评论 0原文

嘿，我有一个列表项轮播，我希望能够做的是，当用户单击列表项（例如列表中的第四个可见项）时，单击的项向左滚动并最终出现在第一个可见位置。

哦，我正在使用 jCarousel 插件来使轮播正常工作。

我有一个链接：

链接

不太确定如何开始，有什么想法吗？

谢谢！

原文

分享到QQ

分享到微博

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

发布评论

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

我三岁 2024-10-22 23:18:27

这是我的轮播，可能会有所帮助（它有点击事件和动画）：

<html>
    <head>
        <title></title>
        <style type="text/css">
            #wrapper { width: 300px; overflow: hidden; height: 100px; min-height: 100px; position: relative; margin: 0; padding: 0;  }
            #ul { width: 9999px; height: 100px; position: absolute; margin: 0 auto; padding: 0; text-align: center;  }
            .li { float: left; list-style-type: none; position: relative; margin: 0 auto; padding: 0;  }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                for (var i = 24; i > 0; i--) {
                    $('#ul').append('<li class="li" style="z-index: '+i+'"><img src="http://www.jamesgraygallery.com/artimages/Mee%20Kyung%20Shim/slides/Last%20Summer,50x50.jpg" alt="'+i+'" width="100" height="100"</li>');
                }

                $('#ul').css({ //Reset the carousel to the center
                    'left': -($('.li').size()*$('.li').width())/2
                });

                var howMany = $('.li').size();
                var halfIt = howMany/2;
                var merp = $('.li').index('#ul');

                $('#right').click(function() {  //Right button
                    $('#ul').animate({
                        left: '-='+($('.li').width()*3) //Move the images
                    }, 500);
                    return false;
                });

                $('#left').click(function() {  //Left button
                    $('#ul').animate({
                        left: '+='+($('.li').width()*3) //Move the images
                    }, 500);
                    return false;
                });

            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <ul id="ul">

            </ul><br />
        </div>
        <a href="#" id="right">right</a>  <a href="#" id="left">left</a>
    </body>
</html>

这应该是一个开始的好地方。 ^_^

注意：这不会为您提供所需的“点击动画”功能，但我无法为您完成这一切，可以吗？ :)

Here is my carousel, which may help (it has click events and animations):

<html>
    <head>
        <title></title>
        <style type="text/css">
            #wrapper { width: 300px; overflow: hidden; height: 100px; min-height: 100px; position: relative; margin: 0; padding: 0;  }
            #ul { width: 9999px; height: 100px; position: absolute; margin: 0 auto; padding: 0; text-align: center;  }
            .li { float: left; list-style-type: none; position: relative; margin: 0 auto; padding: 0;  }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                for (var i = 24; i > 0; i--) {
                    $('#ul').append('<li class="li" style="z-index: '+i+'"><img src="http://www.jamesgraygallery.com/artimages/Mee%20Kyung%20Shim/slides/Last%20Summer,50x50.jpg" alt="'+i+'" width="100" height="100"</li>');
                }

                $('#ul').css({ //Reset the carousel to the center
                    'left': -($('.li').size()*$('.li').width())/2
                });

                var howMany = $('.li').size();
                var halfIt = howMany/2;
                var merp = $('.li').index('#ul');

                $('#right').click(function() {  //Right button
                    $('#ul').animate({
                        left: '-='+($('.li').width()*3) //Move the images
                    }, 500);
                    return false;
                });

                $('#left').click(function() {  //Left button
                    $('#ul').animate({
                        left: '+='+($('.li').width()*3) //Move the images
                    }, 500);
                    return false;
                });

            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <ul id="ul">

            </ul><br />
        </div>
        <a href="#" id="right">right</a>  <a href="#" id="left">left</a>
    </body>
</html>

This should be a good place to get you started. ^_^

note: This will not give you the CLICK-TO-ANIMATE function you require, but I can't do it all for you can I? :)

回复收藏 0 原文

~没有更多了~