但有 4 张图片:
我找不到怎么做我应该使用什么选项与 fredcarousel 你能推荐我吗?
谢谢
以下是这个 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 和 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
在每一步将其插入脚本中。