jquery clickイベント、nextとprevを使用してリストアイテムをdivの上部にスクロールする

Question

clickイベントを使用して、次のリスト項目と前のリスト項目をdivの先頭にスクロールし、最後に到達するとそれは最初のものを示し、それを円形にします。 また、できるだけ1分ごとに自動スクロールさせるようにしてください。

私は、私は別のポストから適応していること以下expample持っている：私はdivの中に収まることができるなど、多くのを見せたい時に1を示す場合は代わりに

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

あなたは単に似行うことができますがthis：

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