Question

但有4张图片：

enter image description here

我找不到怎么做我应该在fredcarousel上使用哪些选项你可以推荐我吗？

由于

Answer 1

以下是这个carouFredsel示例中发生的事情的细分：

作者使用变量指定幻灯片中每个元素的位置：

var _center = {
    width: 600,
    height: 400,
    marginLeft: 0,
    marginTop: 0,
    marginRight: 0
};
var _left = {
    width: 300,
    height: 200,
    marginLeft: 0,
    marginTop: 150,
    marginRight: -150
};
var _right = {
    width: 300,
    height: 200,
    marginLeft: -150,
    marginTop: 150,
    marginRight: 0
};
var _outLeft = {
    width: 150,
    height: 100,
    marginLeft: 150,
    marginTop: 200,
    marginRight: -200
};
var _outRight = {
    width: 150,
    height: 100,
    marginLeft: -200,
    marginTop: 200,
    marginRight: 50
};

然后使用carouFredSel启动器来自定义滚动行为：

$('#carousel').carouFredSel({
    width: 900,
    height: 400,
    align: false,
    items: {
        visible: 3,
        width: 100
    },
    scroll: {
        items: 1,
        duration: 400,
        onBefore: function( data ) {
            data.items.old.eq( 0 ).animate(_outLeft);
            data.items.visible.eq( 0 ).animate(_left);
            data.items.visible.eq( 1 ).animate(_center);
            data.items.visible.eq( 2 ).animate(_right).css({ zIndex: 1 });
            data.items.visible.eq( 2 ).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: 2 });
            }, 200);
        }
    }
});

onBefore事件接收许多不同的参数，其中包含有关幻灯片的当前信息。在这种情况下，第一个参数是oldItems，然后使用先前设置的“位置”（var _center，var _left等），脚本动画化要对应的项目。这些线然后设置css＆amp;动画后幻灯片中元素的z-index。它允许幻灯片以更有效的方式根据其css属性选择元素。

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

要使其适应4个元素，您需要添加第5个带定位的变量和名称为_farRight的变量，并在每个步骤中将其插入脚本中。

caroufredsel Cool carousel 51有四个图像

1 个答案: