0

I have the following carousel, it navigates to the right just like I want but I can't get the same animation to the left. Anyone willing to help me crack this problem?

http://jsfiddle.net/kaisersoze/QDUea/5/

fullscreen:

http://jsfiddle.net/kaisersoze/QDUea/5/embedded/result/

function initCarousel() {
    var _center = {
        width: 210,
        height: 120,
        marginLeft: 0,
        marginTop: 0,
        marginRight: 10
    };
    var _left = {
        width: 178,
        height: 100,
        marginLeft: 0,
        marginTop: 9,
        marginRight: -118
    };
    var _right = {
        width: 178,
        height: 100,
        marginLeft: -119,
        marginTop: 9,
        marginRight: 0
    };
    var _outLeft = {
        width: 133,
        height: 75,
        marginLeft: 210,
        marginTop: 9,
        marginRight: -250
    };
    var _outRight = {
        width: 133,
        height: 75,
        marginLeft: 0,
        marginTop: 9,
        marginRight: 210
    };

    var i = 0;

    $('#carousel ul').carouFredSel({
        debug: true,
        width: 600,
        height: 135,
        align: false,
        auto: false,
        items: {
            visible: 5,
            width: 100
        },
        next: {
            button: '#btn-go-right',
            items: 1,
            duration: 600,
            onBefore: function(data) {

                if(i > 1){
                    i = 1;
                }

                data.items.old.eq( 0 ).animate(_outLeft);
                    data.items.visible.eq( 0 ).animate(_left).removeClass('active');
                    data.items.visible.eq( 1 ).animate(_center).addClass('active' );
                    data.items.visible.eq( 2 ).animate(_center).addClass('active');
                    data.items.visible.eq( 3 ).animate(_right).css({ zIndex: 1 }).removeClass('active');
                    data.items.visible.eq( 4 ).next().css(_outRight).css({ zIndex: 0 });

                setTimeout(function () {
                    data.items.old.eq( 0 ).css({ zIndex: 1 });
                    data.items.visible.eq( 0 ).css({ zIndex: 2 });
                    data.items.visible.eq( 1 ).css({ zIndex: 3 });
                    data.items.visible.eq( 2 ).css({ zIndex: 3 });
                    data.items.visible.eq( 3 ).css({ zIndex: 2 });
                    data.items.visible.eq( 4 ).css({ zIndex: 1 });
                }, 300);
            }
        },
        prev: {
            button: '#btn-go-left',
            items: 1,
            duration: 600,
            onBefore: function(data) {

                $('#carousel ul').children().eq( 4 ).css(_outRight).css({ zIndex: -1 });

                if(i < 4){
                    $('#carousel ul').children().eq( 0 ).css(_left).css({ zIndex: 2 });
                    $('#carousel ul').children().eq( 4 ).css(_right).css({ zIndex: 2 });
                    // $('#carousel ul').children().eq( 0 ).animate(_outLeft).css({ zIndex: 3 });
                    // $('#carousel ul').children().eq( 1 ).animate(_left).css({ zIndex: 3 });
                    // $('#carousel ul').children().eq( 2 ).animate(_center).css({ zIndex: 3 });
                    // $('#carousel ul').children().eq( 3 ).animate(_center).css({ zIndex: 2 });
                    $('#carousel ul').css({'position':'relative','left':'10px'});
                    i++;
                }

                data.items.old.eq( 0 ).animate(_center);
                    data.items.visible.eq( 0 ).animate(_left).removeClass('active');
                    data.items.visible.eq( 1 ).animate(_center).addClass('active');
                    data.items.visible.eq( 2 ).animate(_center).addClass('active');
                    data.items.visible.eq( 3 ).animate(_right).css({ zIndex: 1 }).removeClass('active');
                    data.items.visible.eq( 4 ).next().css(_outLeft).css({ zIndex: 0 });

                setTimeout(function () {
                    data.items.old.eq( 0 ).css({ zIndex: 3 });
                    data.items.visible.eq( 0 ).css({ zIndex: 2 });
                    data.items.visible.eq( 1 ).css({ zIndex: 3 });
                    data.items.visible.eq( 2 ).css({ zIndex: 3 });
                    data.items.visible.eq( 3 ).css({ zIndex: 2 });
                    data.items.visible.eq( 4 ).css({ zIndex: 1 });
                }, 300);
            }
        }
    });

    $('#carousel ul').children().eq( 0 ).css(_left).css({ zIndex: 2 });
    $('#carousel ul').children().eq( 1 ).css(_center).css({ zIndex: 3 });
    $('#carousel ul').children().eq( 2 ).css(_center).css({ zIndex: 3 });
    $('#carousel ul').children().eq( 3 ).css(_right).css({ zIndex: 2 });
    $('#carousel ul').children().eq( 4 ).css(_outLeft).css({ zIndex: 1 });

}


$(document).ready( function(){

initCarousel();

});

PS. You can navigate by clicking on the right/left item in the carousel

4

1 回答 1

0

解决了，我快到了。唯一缺少的是 prev 按钮处理程序中的以下内容：

data.items.visible.first().css(_outLeft);

于 2013-02-28T09:14:18.920 回答