JavaScript-如何从上到下滚动li元素

我已经编写了一个脚本，可以自动地从下到上滚动

li

元素。这是我在jsbin上的个人信息

我试图实现一个相反的效果，现在滚动项目从上到下，但迄今为止还没有成功。这就是我迄今为止所尝试的

在这方面有人能帮我吗？提前谢谢

---

JavaScript代码：

$('#scroller').bind('touchmove',function(e){
      e.preventDefault();
      // Write code to scroll the items
      alert("Touch move occured");

});


function run() {
  /*  
    var prev = $("#scroller li:first-child");
    $.unique(prev).each(function(i) {
      $(this).delay(i*10).slideDown(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
  */
  $("#scroller li:last").slideUp(function() {
        $(this).remove();
        $("#scroller").prepend($(this));
        $(this).slideDown();
    });
}

window.setInterval(run, 100);

相关HTML：

    <div id="wrapper">
        <div id="panels">
            <div  id="scroller">
                <ul>
                                      <li> Barley Wine </li>
                                      <li> Bitter Ale </li>
                                      <li> Brown Ale </li>
                                      <li> India Pale Ale </li>
                                      <li> Pale Ale </li>
                                      <li>list 1</li> 
                                      <li>list 2</li>
                                      <li>list 3</li>
                                      <li>list 4</li>
                </ul>
            </div>
        </div>
    </div>

大麦酒
苦啤酒
棕色啤酒
印度淡啤酒
淡啤酒
列表1
清单2
清单3
清单4

您将

元素预先添加到

而不是

。只需将“scroller”id移动到

，它就会变得更好。

我添加了代码-除了jsbin/JSFIDLE之外，在您的SO问题中添加适当的、相关的代码总是很有帮助的。感谢您的观点。除了滚动速度外，它工作得更好。下面是我的两个比较滚动速度的脚本：你知道哪里会出错吗？提前谢谢。它们是不同的，但是代码是完全不同的。我真的不明白你想做什么，或者哪一个更好。我的基本目标是自动滚动项目。到目前为止，滚动在当前情况下发生，但不如前一个（底部->顶部）平滑。这两种情况下的代码也不同；我试图复制以前的代码以实现新的效果，但最终得到的是当前版本。你能告诉我应该修改什么来达到完全相同的效果吗？那么为什么不让自顶向下的代码做与自顶向下的代码完全相同的事情，除了向后？换言之，删除第一个元素并将其附加到

的末尾。。这就是我尝试过的，但没有达到效果；-）