旋轉列表項

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';"