jQuery 3d 滑动切换过渡

Question

我想创建一个简单的内容滑块，将元素移动到不同的层，看看小提琴：

http://jsfiddle.net/ujmdjL00/3/

$(document).ready(function() {
    
    var offset = 0;
    var opacity = 1;
    var zindex = $("#slider li").length;
    
    var nextBtn = $("#next");
    var prevBtn = $("#prev");
    
    $("#slider li").each(function() {
        $(this).css({
            top: -offset,
            bottom: offset,
            left: offset,
            right: offset,
            opacity: opacity,
            zIndex: zindex
        });
        
        offset = offset + 10;
        opacity = opacity - 0.2;
        zindex = zindex - 1;
    });
    
    nextBtn.click(function() {
    
    });
    
    prevBtn.click(function() {
    
    });
    
});

#slider {
    width: 400px;
    margin: 100px auto 0 auto;
    position: relative;
    padding: 0;
    list-style: none;
}

#slider li {
    background: #000;
    height: 300px;
    line-height: 300px;
    color: #fff;
    position: absolute;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="prev">prev</button>
<button id="next">next</button>

<ul id="slider">
    <li>Slide #1</li>
    <li>Slide #2</li>
    <li>Slide #3</li>
    <li>Slide #4</li>
</ul>

如果单击“下一步”按钮，则第一张幻灯片应放大并淡出，然后显示第二张（每张幻灯片都必须移动，第一张附加在末尾）。

我的问题：

如何创建这样的循环？ 最好的方法是什么 - 克隆第一张幻灯片或移动？

我应该使用transform: scale(); 还是操纵宽度/高度？

我也不确定如何实现动画 - 任何有用的提示/链接？

谢谢！

Answer 1

我让它像循环旋转木马一样工作。我希望这能给你一个好的方向，如果不是你想要的。

http://jsfiddle.net/ujmdjL00/12/

$(document).ready(function() {

    var offset = 0
        , index=0
        , totalCount = $("#slider li").length
    ;
    var opacity = 1;
    var zindex = $("#slider li").length;

    var nextBtn = $("#next");
    var prevBtn = $("#prev");

    $("#slider li").each(function() {
        $(this).css({
            top: -offset,
            bottom: offset,
            left: offset,
            right: offset,
            opacity: opacity,
            zIndex: zindex
        });
        $(this).attr("data-num", zindex - 1);
        offset = offset + 10;
        opacity = opacity - 0.2;
        zindex = zindex - 1;
    });

    nextBtn.click(function() {
        var activeItem = $("#slider li.active")
            , index = parseInt(activeItem.attr("data-num"));

        UpdateSliderTiles(activeItem, index, true);

    });

    prevBtn.click(function() {
        var activeItem = $("#slider li.active")
            , index = parseInt(activeItem.attr("data-num"));

        UpdateSliderTiles(activeItem, index, false);
    });

    function UpdateSliderTiles(item, index, goingForward){

        var nextActiveItemIndex=0, dataNum = 0;
        if(goingForward){
            offset = 30;
            opacity = 0.4;
            zindex = 1;
            dataNum = 0;
            nextActiveItemIndex = 2;
        }
        else{
            offset = 0;
            opacity = 1;
            zindex = 4;
            dataNum = 3;
            nextActiveItemIndex = 0;
        }

        var NOffset = null
            , NOpacity = null
            , NZIndex = null
            , NDataNum = null
        ;

        $("#slider li").removeClass("active");

        $("#slider li").each(function() {

            var num = parseInt($(this).attr("data-num"));
            if(nextActiveItemIndex == num){
                $(this).addClass("active");
            }
            if((goingForward && num==index) || (!goingForward && num==nextActiveItemIndex)){
                $(this).css({
                    top: -offset,
                    bottom: offset,
                    left: offset,
                    right: offset,
                    opacity: opacity,
                    zIndex: zindex
                });

                $(this).attr("data-num", dataNum);
            }
            else{
                if(goingForward){
                    num = num+1;
                    NOffset = parseInt($(this).css("bottom"))-10;
                    NOpacity = parseFloat($(this).css("opacity"))+0.2;
                    NZIndex = parseInt($(this).css("zIndex"))+1;
                }
                else{
                    num = num-1;
                    NOffset = parseInt($(this).css("bottom"))+10;
                    NOpacity = parseFloat($(this).css("opacity"))-0.2;
                    NZIndex = parseInt($(this).css("zIndex"))-1;
                }

                $(this).css({
                        top: -NOffset,
                        bottom: NOffset,
                        left: NOffset,
                        right: NOffset,
                        opacity: NOpacity,
                        zIndex: NZIndex
                });

                $(this).attr("data-num", num);
            }



        });


    }

});