jquery单击事件,使用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');
        }
    });