0

前へ/次へボタンを備えた最もシンプルな垂直カルーセルを作成しています。私はほとんどそこにいますが、私は次のことを理解していません：

var shortnewsblockHeight = $(".shortnewsblock").outerHeight();
var totalnewsblocks = $(".shortnewsblock").length;
var i = 0;
$(".stamp.long a.prev").css({ "opacity": "0.3", "text-decoration": "none", "cursor": "default" });

goDown();
goUp();

function goDown() {
    $(".stamp.long a.next").click(function () {
        $(".stamp.long a.prev").animate({
            'opacity': '1'
        }, 300);
        $(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" });
        i++;
        if (i != (totalnewsblocks - 5)) {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '-=' + shortnewsblockHeight
            }, 600);
        } else {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '-=' + shortnewsblockHeight
            }, 600);
            $(".stamp.long a.next").animate({
                'opacity': '0.3'
            }, 300);
            $(".stamp.long a.next").css({ "text-decoration": "none", "cursor": "default" });
            $(".stamp.long a.prev").animate({
                'opacity': '1'
            }, 300);
            $(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" });

        }
        return false;
    });
}

function goUp() {
    $(".stamp.long a.prev").click(function () {
        i--;
        if (i != 0) {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '+=' + shortnewsblockHeight
            }, 600);
            $(".stamp.long a.next").animate({
                'opacity': '1'
            }, 300);
            $(".stamp.long a.next").css({ "text-decoration": "underline", "cursor": "pointer" });

        } else {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '+=' + shortnewsblockHeight
            }, 600);
            $(".stamp.long a.prev").animate({
                'opacity': '0.3'
            }, 300);
            $(".stamp.long a.prev").css({ "text-decoration": "none", "cursor": "default" });


        }
        return false;
    });
}

  1. 前へ/次へのボタンのクリックが速すぎると、高さがスクランブルされ、カルーセルの「ブロックスタイル」のアニメーションが失われます。

  2. カルーセルでスクロールする要素がなくなると、ボタンがフェードアウトします（カーソルがデフォルトになるため、エンドユーザーはクリックしようとしません）。ただし、エンドユーザーは引き続きクリックしてカルーセルを台無しにすることができるため、完全に無効にする必要があります。

乾杯！

JSFiddle： http: //jsfiddle.net/REVDc/1/

4

1 に答える 1

0

  1. アニメーションから削除するstopか、アニメーションの実行中にクリック イベントを削除します。

  2. pointer-events: noneクリックを無効にするために使用します。詳細については、こちらをご覧ください。

于 2013-01-10T13:34:11.783 に答える