Как создать вращатель jquery li

Question

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

---

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

1. скрыть все элементы
2. показать первый элемент
3. повторить
   1. задержка
   2. если он включен в последний раз (скрыть этот элемент / показать первый элемент
   3. если еще (скрыть этот элемент / показать следующий элемент
4. onclick (nextbutton)
   1. если включить в последний раз (скрыть этот элемент / показать первый элемент
   2. если еще (скрыть этот элемент / показать следующий элемент
5. onclick (prevbutton)
   1. если включен первым (скрыть этот элемент / показать последний элемент)
   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
        });
    });
});

Answer 1

У вас есть проблемы с вашим кодом?Stackoverflow - это не место, где можно просто отбросить проекты кода и завершить их кем-то еще.

Вот хороший учебник по созданию собственного с использованием Jquery с той же разметкой, что и у вас.

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

Answer 2

Вы также можете взглянуть на этот плагин для jQuery. Я использовал это раньше, и это легко реализовать. http://sorgalla.com/projects/jcarousel/