0

さて、まず最初に。私が達成しようとしているのは、独自の「半3d」円形カルーセルを作成することです。それらの多くがあり、iCarouselのようないくつかの非常に素晴らしいものがあります(これは私がやや目指していることです)

地獄のためだけに自分で作りたかったのですが、それは良い習慣だと思います。

これまでのところ、私はこれを持っていますhttp://jsfiddle.net/Puzzle/Pmxjf/10/

     $this.Shift = function (items, end) {
        if (end == true) {
            $this.children().each(function () {
                // Rearrange all items
                $this.CalculateNewPos(this);
                $this.Rotate(this);
            });
        }
        else {
            $this.children().each(function () {
                // Rearrange all items
                $this.CalculateNewPos(this);
                $this.Rotate(this);
            });
        }
    }

    $this.ShiftRight = function(items, index)
    {
        $(items[index]).fadeOut('slow', function () {
            $(this).insertAfter($this.children().last());
            $this.Shift(items, false);
            $(this).fadeIn('slow');
        });
    }

    $this.ShiftLeft = function(items, index, currentItem)
    {
        $(items[currentItem - index]).fadeOut('slow', function () {
            $(this).insertBefore($this.children().first());
            $this.Shift(items, true);
            $(this).fadeIn('slow');
        });
    }

このコードは基本的にすべての削除を行います。そして、jsfiddleにあるローテーションコード。

ご覧のとおり、釣りは最初のロードでうまく機能しますが、回転すると多少失敗します。また、フェードは見栄えがしますが、最後に画像divをクリックすると、一度に2つフェードします。

そして何よりも最悪。insertBeforeとinsertAfterを使用すると、カルーセル全体がシフトします。

今の私の頭脳クラッカーは、純粋なアニメーションによってスタックの最後または最初にスムーズに移動させる方法を理解することです。

私が探し始めるべき手がかりを持っている人はいますか?私はiCarouselコードを調べましたが、それはまだ取り組む準備ができていない、クレイジーな量の生の数学です。

ありがとう :)

4

0 に答える 0