How to create a jquery li rotator

My idea was to create a list with images in it that would hide all the items first then show the first one, then repetitively hide the current li and then show the next one. Then when the la开发者_StackOverflowst item was reached it would hide it then show the first and start the process over.

On the document(ready) i want the following to happen:

1. hide all items
2. show first item
3. repeat
   1. delay
   2. if on last (hide this item / show first item
   3. if else (hide this item / show next item
4. onclick (nextbutton)
   1. if on last (hide this item / show first item
   2. if else (hide this item / show next item
5. onclick (prevbutton)
   1. if on first (hide this item / show last item)
   2. if else (hide this item / show prev item)

here's the list I'm using:

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

I also would like a left and right button that would switch between the different items.

Also as a bonus if anyone is willing is it possible to make it slide left or right through the images?

Thanks!

UPDATE:

Well now that I think of it, I probably shouldn't ask this without including the code I have, I just thought I was doing it all wrong anyways this is what I've done so far:

PS: I'm really new to Javascript as you probably can tell...

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

Are you currently having issues with your code? Stackoverflow isnt a place to just drop off code projects and have them completed by someone else.

Here is a good tutorial on creating your own using Jquery with the same markup you have.

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

You might also take a look at this plugin for jQuery. I've used it before and it's easy to implement. http://sorgalla.com/projects/jcarousel/