Question

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

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

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

如何创建一个jquery li旋转器

2 个答案: