jquery单击事件,使用next和prev将列表项滚动到div的顶部

我正在尝试使用单击事件将下一个和上一个列表项滚动到div的顶部,当它到达结尾时它显示第一个,使其成为循环.
如果可能的话,也可以每隔一分钟自动向下滚动.

我在下面有一个例子,我从另一篇文章改编：

相反,如果一次显示一个,我想显示可以适合div的数量.
我知道我需要更改var currli以检查当前位于顶部的内容并更改nextli以将下一个li滚动到顶部.

非常感谢任何帮助=]

<a id="scrollup" href="#">up</a>  
<a id="scrolldown" href="#">down</a>  
<div id="news">
   <ul>
      <li>item One</li>
      <li>item Two</li>
      <li>item Three</li>
      <li>item Four</li>
      <li>item Five</li>
      <li>item Six</li>
      <li>item Seven</li>
   </ul>
</div>

这是jQuery

$(document).ready(function () {


    $('#arrowdown').click(function(event) {
            event.preventDefault();         // cancel click through
            // get current list item
            var currli = $('#news li:visible');
            // get next list item
            var nextli = currli.next();
            // if nextli length is 0,make it equal to first li
            if (nextli.length == 0) {
                nextli = currli.siblings('#news li:first');
            }
            currli.hide();
            nextli.show();
    });
    $('#arrowup').click(function(event) {
            event.preventDefault();         // cancel click through
            // get current list item
            var currli = $('#news li:visible');
            // get next list item
            var prevli = currli.prev();
            // if nextli length is 0,make it equal to first li
            if (prevli.length == 0) {
                prevli = currli.siblings('#news li:last');
            }
            currli.hide();
            prevli.show();
    });
    $('#news li:nth-child(1)').show();

});

这是jsfiddle链接：
http://jsfiddle.net/bambam007/kyf9e/

解决方法

你可以这样做：

$('#scrollup,#scrolldown').click(function(e) {
            e.preventDefault();   
            var id = e.target.id;
        if(id == 'scrollup'){
            $('li:first').appendTo('ul');
        }else{
            $('li:last').prependTo('ul');
        }
    });