jquery click事件，使用next和prev将列表项滚动到div的顶部

Question

我正在尝试使用单击事件将下一个和上一个列表项滚动到 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/

Answer 1

你可以简单地这样做:

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