Question

首先是好事。我想要完成的是创建我自己的“半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代码，这是一个疯狂的原始数学，我还没准备好解决。

谢谢：）

重新排序html元素，而不是直观地删除它们

0 个答案: