[英]jQuery Cycle plugin advanced slider
I want to build a slideshow with the jQuery Cycle plugin, I've done it before but now I want an advanced slider. 我想用jQuery Cycle插件构建幻灯片,我以前做过,但是现在我想要一个高级滑块。 The slider needs to scrollUp and fadeOut with an delay between the fadeOut and the scrollUp from the next slide;
滑块需要向上滚动和渐变,并在下一张幻灯片的渐变和滚动之间有一个延迟。
This is my code sofar 这是我的代码沙发
$.fn.cycle.transitions.customSlide = function($cont, $slides, opts) {
opts.fxFn = function(curr, next, opts, after) {
$(curr).hide(function() {
$(next).delay(opts.delayBetween).show(function() {
after();
});
});
};
};
$('#slideshow2').cycle({
fx: "customSlide",
delay: 3500,
timeout: 2000,
delayBetween: 1000
});
The code above should just show and hide the object; 上面的代码应仅显示和隐藏对象; how can I make it work so it slides up, and fades out?
我如何使其工作以使其向上滑动并逐渐消失?
I am not sure if you wanted this specifically in the custom function but here is a version just using the built in cycle properties. 我不确定您是否要在自定义函数中专门使用此功能,但这是仅使用内置循环属性的版本。 The animOut is where the magic happens to provide the slideUp and fadeOut functionality.
animOut是神奇的地方,它提供了slideUp和fadeOut功能。 Hope this helps.
希望这可以帮助。
$('#slideshow').cycle({
fx: 'custom',
cssBefore: {
left: 0,
top: 0,
width: 0,
height: 0,
opacity: 1,
display: 'block'
},
animOut: {
opacity: 0,
top: -50
},
animIn: {
left: 0,
top: 0,
width: 200,
height: 200
},
cssAfter: {
zIndex: 0
},
delay: -3000
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.