0

次のカルーセルがあります。右に移動しますが、同じアニメーションを左に移動できません。この問題を解決するのを手伝ってくれる人はいますか?

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

全画面表示：

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。カルーセルの左右のアイテムをクリックして移動できます

4

1 に答える 1

0

それを解決しました、私はほとんどそこにいました。欠けているのは、前のボタンハンドラーで次のことだけでした:

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

于 2013-02-28T09:14:18.920 に答える