5

クリックイベントを使用して、次と前のリストアイテムをdivの一番上までスクロールしようとしています。最後に到達すると、最初のアイテムが表示され、循環します。また、可能であれば、1分ごとに自動スクロールダウンするようにします。

私は別の投稿から適応した以下の例を持っています：

代わりに、一度に1つずつ表示する場合は、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/

4

1 に答える 1

2

あなたはこのように簡単に行うことができます：

     $('#scrollup, #scrolldown').click(function(e) {
            e.preventDefault();   
            var id = e.target.id;
        if(id == 'scrollup'){
            $('li:first').appendTo('ul');
        }else{
            $('li:last').prependTo('ul');
        }
    });
于 2012-07-27T06:49:23.623 に答える