如何创建 jquery li 旋转器

Question

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

---

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

1. 隐藏所有项目
2. 显示第一个项目
3. 重复
   1. 延迟
   2. 如果在最后（隐藏此项/显示第一项
   3. if else（隐藏此项/显示下一项
4. onclick (nextbutton)
   1. 如果在最后（隐藏此项/显示第一项
   2. if else（隐藏此项/显示下一项
5. onclick (prevbutton)
   1. 如果在第一个（隐藏此项/显示最后一项）
   2. 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
        });
    });
});

Answer 1

您目前的代码有问题吗？ Stackoverflow 并不是一个只提供代码项目并让其他人完成的地方。

这是一个很好的教程，介绍如何使用 Jquery 和您拥有的相同标记创建自己的教程。

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

Answer 2

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