さて、まず最初に。私が達成しようとしているのは、独自の「半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コードを調べましたが、それはまだ取り組む準備ができていない、クレイジーな量の生の数学です。
ありがとう :)