sự kiện nhấp chuột jquery, sử dụng tiếp theo và trước để cuộn các mục danh sách lên đầu div

Question

Tôi đang cố gắng sử dụng sự kiện nhấp để cuộn các mục danh sách tiếp theo và trước đó lên đầu div và khi nó đến cuối nó cho thấy đầu tiên, làm cho nó tròn. Và nếu có thể cũng làm cho nó tự động di chuyển xuống mỗi một phút.

Tôi có một expample dưới đây mà tôi đã chuyển thể từ bài khác:

Thay vào đó nếu thấy cùng một lúc tôi muốn thể hiện càng nhiều, có thể phù hợp trong div. Tôi biết tôi một số cách cần phải thay đổi var currli để kiểm tra những gì hiện đang ở trên cùng và thay đổi nextli để cuộn li tiếp theo lên trên cùng.

Any help is appreciated rất nhiều =]

<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> 

Đây là 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(); 

}); 

Dưới đây là liên kết jsFiddle: http://jsfiddle.net/bambam007/kyf9e/

Answer 1

Bạn có thể làm đơn giản như điều này:

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