0

私はイベントのスケジュールを持っています。ul には固定の高さとオーバーフローが隠されています。li にも固定の高さがあります。一度に表示できるのは 4 つだけです。適切なボタンをクリックすると、リストを上下にスクロールする方法を理解する必要があります。

これを行うことができるプラグインが世の中にあると確信していますが、jQuery/JS をよりよく理解するために、自分でこれを行いたいのですが、助けが必要です。HTML/CSSはこちらhttp://jsfiddle.net/DirtyBirdDesign/BJdJ7/

これを次のニーズに分解しました。

  1. リスト項目の数をループしてインデックス付けする
  2. 現在位置を取得する
  3. 「下」ボタンをクリックするたびに、位置を-41px移動します
  4. 「上へ」ボタンをクリックするたびに、位置を +41px 移動します
  5. 遷移をアニメーション化する
  6. 連続ループ - 最後が表示されている場合は最後から最初に移動します

上記で何か不足していますか?どうすればいいですか?知識をありがとう!

4

2 に答える 2

2

position:relative CSS を li に変更する必要があります

#PartnerSchedule ul#PartnerEvents li {
  position:relative;
  width:457px;
  height:41px;
  margin:0 0 2px 0;
  padding:0 10px;
  font:.9em/1.75em "Helvetica Neue", Arial, Helvetica, Genevea, sans-serif;
  overflow: hidden;
  }

このスクリプトは解決策です。制限に達したときにスクロールを停止するコントロールを追加できます。

​$('#up').click(function(){
    $('#PartnerEvents li').animate({top:'-=43'});
});
$('#down').click(function(){
    $('#PartnerEvents li').animate({top:'+=43'});
});

デモ </p>

于 2012-05-03T16:03:28.517 に答える
1
<!-- language: lang-js -->  

var itemsToShow = 4;

$('#PartnerEvents>li').each(function(i,k) {
    var ele = $(this);
    $(ele).attr('id', 'PartnerEvents' + i);
    if (i >= itemsToShow) //i is zero indexed
    {
        $(ele).hide();
    }
});


$('#up').bind('click', function() {
    if ($('#PartnerEvents0:hidden').length > 0)
    {
        // This means we can go up
        var boundaryTop = $('#PartnerEvents li:visible:first').attr('id');
        var boundaryBottom = $('#PartnerEvents li:visible:last').attr('id');

        if ($('#PartnerEvents li#'+ boundaryTop).prev().length > 0)
        {
            $('#PartnerEvents li#'+ boundaryTop).prev().show();
            $('#PartnerEvents li#'+ boundaryBottom).hide();
        }
    }
});

$('#down').bind('click', function() {
    if ($('#PartnerEvents li:last:hidden').length > 0)
    {
        // This means we can go down
        var boundaryTop = $('#PartnerEvents li:visible:first').attr('id');
        var boundaryBottom = $('#PartnerEvents li:visible:last').attr('id');

        if ($('#PartnerEvents li#'+ boundaryBottom).next().length > 0)
        {
            $('#PartnerEvents li#'+ boundaryBottom).next().show();
            $('#PartnerEvents li#'+ boundaryTop).hide();
        }
}
});
于 2012-05-03T16:38:53.790 に答える