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