Javascript 在无序列表中切换并更改列表项在其中的位置

我正在开发一个小应用程序，可以让你浏览3d风格的名片。 基本上，我有一个无序列表，包含10个列表项。每次按下左侧的向下箭头时，我都要删除第一个

（前面的一个），并将其推到后面（因此它将成为列表中的最后一个

）

此外，由于除第一个项目外，所有项目都具有负transformZ值以将其推回，因此每次按下向下btn时，我希望重新排列它们，使它们更接近用户。现在，它们每个都有一个80*i的transformZ值，我不知道如何在不破坏相同布局的情况下将它们推向另一个方向

我试着做一些类似的事情，但不幸的是，它没有起到作用：

btnDown.addEventListener('click', function() {
        listItems[0].parentNode.removeChild(listItems[0]);
        for (i=0; i<=listItems.length-1;i++) {
            list.style.webkitTransform = "rotateX(0deg) translateZ(-" + (100*i) + "px)";    
        }

btnDown.addEventListener（'click'，function（）{
listItems[0].parentNode.removeChild（listItems[0]）；
对于（i=0；i
对于向上按钮，请使用insertBefore（）函数。请参阅：
@Cobote:+1。建议您将For循环作为一个函数，并在加载和按钮事件后调用它，而不是再次写入相同的行：）还有一个问题。当btnUp被点击时，逆转效果的最佳方法是什么？感谢所有的帮助人员。最后两个问题：为什么我必须再次在事件侦听器中声明listItems？我已经在全局声明了它，它应该可以访问它。第二，除了滚动之外，有相同效果的最佳方法是什么？
btnDown.addEventListener('click', function() {  
  listItems[0].parentNode.appendChild(listItems[0]);
  // re-index list
  listItems = document.querySelectorAll('#primary ul li')
  for (i=0; i<=listItems.length-1; i++) {
    listItems[i].style.webkitTransform = "rotateX(0deg) translateZ(-" + (80*i) + "px) translateY(-" + i*20 + "px)";
  }
}, false);

btnUp.addEventListener('click', function() {  
 var lastItem = listItems[listItems.length-1]
  listItems[0].parentNode.insertBefore(lastItem, listItems[0]);
  listItems = document.querySelectorAll('#primary ul li');
  applyWebkitTransform();
}, false);