如何创建一个jquery li rotator

Posted 2023-02-25

【中文标题】如何创建一个jquery li rotator

【英文标题】：How to create a jquery li rotator

【发布时间】：2011-02-21 04:33:54

【问题描述】：

我的想法是创建一个包含图像的列表，首先隐藏所有项目，然后显示第一个，然后重复隐藏当前的 li，然后显示下一个。然后当到达最后一个项目时，它将隐藏它，然后显示第一个并重新开始该过程。

---

在文档（准备好）上，我希望发生以下情况：

隐藏所有项目 显示第一项 重复
延迟 如果在最后（隐藏此项/显示第一项 否则（隐藏此项/显示下一项
onclick（下一个按钮）
如果在最后（隐藏此项/显示第一项 否则（隐藏此项/显示下一项
onclick（上一个按钮）
如果在第一个（隐藏此项/显示最后一项） if else（隐藏此项目/显示上一个项目）

---

这是我正在使用的列表：

<ul id="rotator">
    <li class="rimage"><img /></li>
    <li class="rimage"><img /></li>
    <li class="rimage"><img /></li>
</ul>

我还想要一个左右按钮，可以在不同的项目之间切换。

另外，如果有人愿意，是否可以让它在图像中向左或向右滑动？

谢谢！

更新：

现在我想起来了，我可能不应该在不包括我拥有的代码的情况下问这个问题，我只是觉得我做错了，这就是我到目前为止所做的：

PS：我对 javascript 很陌生，你可能知道...

$(document).ready(function()
    $('.rimage').hide(function()
        $('.rimage:first').fadeIn(100, function()
            var a = 0;
            var mouseover = false;

            $('#rotator').mouseover(function()
                mouseover = true;
            );
            $('#rotator').mouseout(function()
                mouseover = false;
            );


            //BEGIN LOOP
            while (a != 1 && mouseover == false)
                if(this == last)
                    $(this).hide("slide", direction: "up", 400, function()
                        $('.rimage:first').show("slide", direction: "up", 400);
                    );
                ;
                else
                    $(this).hide("slide", direction: "up", 400, function()
                        $(this).next().show("slide", direction: "up", 400);
                    );
                ;
            ;
            //END LOOP

            //BUTTONS

            //NEXT BUTTON
            $('rightarrow').click(function()
                if(this, '.rimage:last')
                    $(this).hide("slide", direction: "up", 400, function()
                        $('.rimage:first').show("slide", direction: "up", 400);
        );
        ;
        else
            $(this).hide("slide", direction: "up", 400, function()
                $(this).next().show("slide", direction: "up", 400);
            );
            ;
    );

    //PREV BUTTON
    $('leftarrow').click(function()
        if(this, '.rimage:first')
            $(this).hide("slide", direction: "down", 400, function()
                $('.rimage:last').show("slide", direction: "down", 400);
        );
            ;
        else
            $(this).hide("slide", direction: "down", 400, function()
                $(this).next().show("slide", direction: "down", 400);
        );
        ;
         );

     //END BUTTONS
        );
    );
);

【问题讨论】：

您想在单击某个项目后停止延迟吗？

我很确定有很多这样的插件可以做同样的事情。为什么要自己做？

另外，这里有一个类似的问题：***.com/q/5053413/497356。不使用无序列表或计时器，但它可以帮助您入门。

【参考方案1】：

您目前的代码有问题吗？ *** 不是一个仅仅放弃代码项目并让其他人完成的地方。

这里有一个很好的教程，教你如何使用 Jquery 使用与你相同的标记来创建自己的。

http://tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/

【参考方案2】：

你也可以看看这个 jQuery 插件。我以前用过，很容易实现。 http://sorgalla.com/projects/jcarousel/