Как создать ротатор jquery li

Моя идея состояла в том, чтобы создать список с изображениями в нем, который сначала скрывает все элементы, затем показывает первый, затем повторно скрывает текущий li, а затем показывает следующий. Затем, когда будет достигнут последний элемент, он скроет его, затем покажет первый и начнет процесс заново.

В документе (готовом) я хочу, чтобы произошло следующее:

1. скрыть все элементы
2. показать первый элемент
3. repeat
   1. delay
   2. если на последнем (скрыть этот элемент / показать первый элемент
   3. если еще (скрыть этот элемент/показать следующий элемент
4. onclick (nextbutton)
   1. if on last (hide this item / show first item
   2. если еще (скрыть этот элемент/показать следующий элемент
5. onclick (prevbutton)
   1. if on first (hide this item / show last item)
   2. если еще (скрыть этот элемент / показать предыдущий элемент)

вот список, который я использую:

<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
        });
    });
});