jQuery Cycle插件高级滑块

时间:2011-11-12 16:03:37

标签: jquery slideshow cycle

我想用jQuery Cycle插件制作幻灯片,之前我已经完成了,但现在我需要一个高级滑块。 滑块需要scrollUp和fadeOut,fadeOut和下一张幻灯片的scrollUp之间有一段延迟;

这是我的代码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
});

上面的代码应该只显示和隐藏对象;我怎样才能使它工作,以便它向上滑动并淡出?

1 个答案:

答案 0 :(得分:0)

我不确定您是否在自定义函数中特别想要这个,但这里只是使用内置循环属性的版本。 animOut是魔术恰好提供slideUp和fadeOut功能的地方。希望这可以帮助。

    $('#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 
    });