jquery click事件，使用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'); 
        } 
    });