вращающийся элемент списка

Question

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

Это код, который я использую для поворота списка:1003 * здесь

Спасибо

Answer 1

split дает кнопкам два класса .up и .down и прикрепляет события

рабочая версия на скрипке здесь или здесь

$(".up").click(function(){
    $("ul li:first").slideUp('slow', function () {
         $("ul li:last").after($(this));
    }).slideDown('slow');
});

$(".down").click(function(){
    $("ul li:last").slideUp('slow', function () {
         $("ul li:first").before($(this));
    }).slideDown('slow');
});

Answer 2

Звучит так, будто вы пытаетесь контролировать направление вращения списка. Если это так, попробуйте это:

var direction = 'down';

    $(document).ready(function () {
        var swap = function () {
            if (direction == 'down') {
                $("ul li:last").slideUp('slow', function () {
                    $(this).remove();
                    $("ul").prepend($(this));
                    $(this).slideDown('slow', function () {
                        swap();
                    });
                });
            }
            else {
                $("ul li:first").slideDown('slow', function () {
                    $(this).remove();
                    $("ul").append($(this));
                    $(this).slideUp('slow', function () {
                        swap();
                    });
                });
            }
        }
        swap();
    });

Тогда все, что нужно вашим кнопкам, это изменить значение «направление», например,

onclick="direction = 'up';"