0

我正在使用 jQuery Cycle 插件作为滑块 - 我需要在每张幻灯片中制作一些淡入淡出效果。
有没有人有这方面的经验？不幸的是，我在创建 JavaScript 方面毫无用处，而且我无法找到任何出色的支持文档。
这是一个示例
，我的功能代码如下。

$('#yslider ul').cycle({
           fx:     'fade',
           speed:   'slow',
           timeout: 1000,
           before: first,
           after:    second,
           pager:    '#number',
           pause: 1
        });
        function first(){
            $('.left').fadeOut(800).delay(100).animate({opactiy: 0.5 });
            $('.middle').delay(800).fadeOut(1300).animate({opactiy: 1.0 });
            $('.right').delay(2500).animate({right:'-1980px'}, 700);
        }
        function second(){
            $('.left').fadeIn(1000).delay(300).animate({opactiy: 1.5 });
            $('.middle').fadeIn(1500).delay(500).animate({opactiy: 2.5 });
            $('.right').delay(2500).animate({right: '-26px'}, 700);
        }
4

2 回答 2

0

所有你需要的是调用之前：循环选项.. onBefore 初始化你的动画并放置一些延迟，然后完成你的动画。我让 eq() 仅执行当前的“li”，因为您对所有滑动选项卡使用相同的类。

$(document).ready(function(){
    $('#yslider ul').cycle({
       fx:     'fade',
       speed:   'slow',
       timeout: 10000,
       before: pehla,
       pager:   '#number',
       pause: 1
    });
});
var sliderSize = $('#yslider ul li').size();
function pehla(){
    if(i == sliderSize)
        i = 0;
    $('.left:eq('+i+')').fadeIn(800, function(){
        $('.middle:eq('+i+')').fadeIn(1300, function(){
            $('.right:eq('+i+')').animate({right:'0px'}, 700, function(){
                $('.right:eq('+i+')').delay(4400).animate({right: '-1980px'}, 200, function(){
                    $('.middle:eq('+i+')').fadeOut(1300, function(){
                        $('.left:eq('+i+')').fadeOut(800);
                        i++;
                    });
                });
            });
        });
    });
}

您还需要编辑一些 CSS

.left{left:0;display:none;}
.middle{ left: 13px;top: -75px;display:none;}
.right{right:-1980px;}

根据您的整体动画持续时间设置超时 + 每张幻灯片的延迟在这里我设置 10000 毫秒 = 开始动画（800 + 1300 + 700）+ 延迟（4400）+ 最终动画（900+1300+800）

于 2012-07-31T08:04:06.063 回答
0

您将拥有 currentSlideElement并nextSlideElement作为参数传递给转换回调函数，这将使您能够执行以下操作：

function beforeCallback(currSlideElement, nextSlideElement) {
    //find something inside the current Element
    $(currSlideElement).find('.left').fadeIn();
    $(currSlideElement).find('.right').fadeIn();

    //find something inside the next Element
    $(nextSlideElement).find('.left').fadeOut();
    $(nextSlideElement).find('.right').fadeOut();
}

或者

function afterCallback(currSlideElement, nextSlideElement) {
    $(currSlideElement).find('.left').fadeOut();
    $(currSlideElement).find('.right').fadeOut();

    $(nextSlideElement).find('.left').fadeIn();
    $(nextSlideElement).find('.right').fadeIn();
}

见http://jquery.malsup.com/cycle/options.html

于 2012-07-31T06:16:09.700 回答