旋转列表项

Question

我创建了一个旋转的列表项，但我想介绍两个按钮来控制列表。第一个按钮应该基本上让列表项向上移动，第二个按钮应该做相反的操作，即让列表项向下滑动。

这是我使用旋转列表中的代码here

感谢

Answer 1

分给按钮两类.up和.down并附加事件

working version on fiddle here或here

$(".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';"