如何替换幻灯片效果以淡出/淡入此幻灯片？答案

【问题标题】：How to replace slide effect to fade out/fade in effect on this slideshow?如何替换幻灯片效果以淡出/淡入此幻灯片？
【发布时间】：2010-11-24 10:43:50
【问题描述】：

我需要在 prev 和 上替换 幻灯片效果 淡出/淡入效果 em>下一个幻灯片功能：

function animate(dir,clicked){
    u = true;
    switch(dir){
        case 'next':
            t = t+1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            if(s<3){
                    if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                    if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
            }
            $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                    if (t===s+1) {
                            t = 1;
                            $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});
                            $(o.slides,obj).children(':eq(0)').css({left: 0});
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});
                    }
                    if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                    if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                    u = false;
            });
            break;
        case 'prev':
            t = t-1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            if (s<3){
                    if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                    if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
            }
            $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                    if (t===0) {
                            t = s;
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                            $(o.slides,obj).css({left: -(s*w-w)});
                            $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                    }
                    if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                    if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                    u = false;
            });
            break;
        case 'fade':
            t = [t]*1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: m});
                    $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                    $(o.slides,obj).children(':eq(0)').css({left:0});
                    if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                    if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    u = false;
            });
            break;
        default:
            break;
    }
 };

我试过了，但自动重启不起作用！

您可以查看文档并下载包含此链接中示例的完整代码： http://github.com/nathansearles/loopedSlider/tree/master

请帮帮我！ （对不起，我的英语不好！）

【问题讨论】：

标签： jquery loops slideshow fade slide

【解决方案1】：

1) 我引入了一个变量来跟踪我们展示内容的容器的左侧：

//these are default options just declare our variable below these
var n = 0;
var interval=0;
var restart=0;
var cLeft = $(o.container).position().left+'px';//Left of Container

2）接下来修改switch语句中的prev和next函数：

function animate(dir,clicked){
    u = true;
    switch(dir){
    case 'next':
        t = t+1;
        m = (-(t*w-w));
        current(t);
        if(o.autoHeight){autoHeight(t);}

        var pre=0;
        if(t===s+1){t = 1; }
        if(t===1){ pre=s; }
        else{ pre = t-1; }
        $(o.slides,obj).children(':eq(' + (pre-1) + ')')
             .css({position:'absolute',left:cLeft,'z-index':'1'})
             .fadeOut('slow');
        $(o.slides,obj).children(':eq(' + (t-1) + ')')
             .css({position:'absolute',left:cLeft,'z-index':'500'})
             .fadeIn('slow');
        u = false;
        break;
    case 'prev':
        t = t-1;
        m = (-(t*w-w));
        current(t);
        if(o.autoHeight){autoHeight(t);}

        var pre=1;
        if(t===0){ t = s; }
        else{ pre = t+1; }
        $(o.slides,obj).children(':eq(' + (pre-1) + ')')
                .css({position:'absolute',left:cLeft,'z-index':'1'})
                .fadeOut('slow'); //FADEOUT CURRENT IMAGE
        $(o.slides,obj).children(':eq(' + (t-1) + ')')
                .css({position:'absolute',left:cLeft,'z-index':'500'})
                .fadeIn('slow');//FADEIN NEXT ONE
        u = false;
        break;
        //....
        //....rest of the stuff which you can modify like this

【讨论】：

第一次迭代后淡入淡出工作。您从 1 移动到 4，然后它将开始工作。我正在修复它
我已经对其进行了一些修改，现在可以使用 autoStart 也请让我可以将脚本和测试页面发送给您（实际上测试页面来自 github 的示例）？
我已将代码通过电子邮件发送到您的地址。如您所见，example-3 页面也在运行！

【解决方案2】：

我没有对此进行测试，但我所做的只是将 .animate 函数替换为 .fadeOut 函数。

function animate(dir,clicked){  
                u = true;       
                switch(dir){
                        case 'next':
                                t = t+1;
                                m = (-(t*w-w));
                                current(t);
                                if(o.autoHeight){autoHeight(t);}
                                if(s<3){
                                        if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                                        if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
                                }
                                $(o.slides,obj).fadeOut(o.fadespeed ,function(){
                                        if (t===s+1) {
                                                t = 1;
                                                $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});                                                    
                                                $(o.slides,obj).children(':eq(0)').css({left: 0});
                                                $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});                         
                                        }
                                        if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                                        if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                                        u = false;
                                });                                     
                                break; 
                        case 'prev':
                                t = t-1;
                                m = (-(t*w-w));
                                current(t);
                                if(o.autoHeight){autoHeight(t);}
                                if (s<3){
                                        if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                                        if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
                                }
                                $(o.slides,obj).fadeOut(o.fadespeed ,function(){
                                        if (t===0) {
                                                t = s;
                                                $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                                                $(o.slides,obj).css({left: -(s*w-w)});
                                                $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                                        }
                                        if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                                        if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                                        u = false;
                                });
                                break;
                        case 'fade':
                                t = [t]*1;
                                m = (-(t*w-w));
                                current(t);
                                if(o.autoHeight){autoHeight(t);}
                                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                                        $(o.slides,obj).css({left: m});
                                        $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                                        $(o.slides,obj).children(':eq(0)').css({left:0});
                                        if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                                        if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});}
                                        $(o.slides,obj).children().fadeIn(o.fadespeed);
                                        u = false;
                                });
                                break; 
                        default:
                                break;
                        }

【讨论】：

【解决方案3】：

这很容易编辑。

function animate(dir, clicked) {
    u = true;
    switch (dir) {
        case 'next':
            animate('fade', t);                        
            t = t + 1;
            m = (-(t * w - w));
            current(t);
            if (t === s) { t = 0; }

            /* -- don't used this script
            //-- none slide last image is map                       
            if (o.autoHeight) { autoHeight(t); }
            $(o.slides, obj).animate({ left: m }, o.slidespeed, function() {
                if ((t === s + 1)) {
                    t = 1;
                    $(o.slides, obj).css({ left: 0 }, function() { $(o.slides, obj).animate({ left: m }) });
                    $(o.slides, obj).children(':eq(0)').css({ left: 0 });
                    $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w });
                }
                if (t === s) $(o.slides, obj).children(':eq(0)').css({ left: (s * w) });
                if (t === s - 1)//$(o.slides, obj).children(':eq(0)').css({ left: (s * w) });
                {
                    $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ left: s * w - w });
                }
                u = false;
            });                        
            */
            break;
        case 'prev':
            animate('fade', t);
            t = t - 1;
            m = (-(t * w - w));
            current(t);

            /*  -- don't used this script
            if (o.autoHeight) { autoHeight(t); }
            $(o.slides, obj).animate({ left: m }, o.slidespeed, function() {
                if (t === 0) {
                    t = s;
                    $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: (s * w - w) });
                    $(o.slides, obj).css({ left: -(s * w - w) });
                    $(o.slides, obj).children(':eq(0)').css({ left: (s * w) });
                }
                if (t === 2) $(o.slides, obj).children(':eq(0)').css({ position: 'absolute', left: 0 });
                if (t === 1) $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w });
                u = false;
            });
            */
            break;
        case 'fade':
            t = [t] * 1;
            m = (-(t * w - w));
            current(t);
            if (o.autoHeight) { autoHeight(t); }
            $(o.slides, obj).children().fadeOut(o.fadespeed, function() {
                 $(o.slides, obj).css({ left: m });
                 $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ left: s * w - w });
                 $(o.slides, obj).children(':eq(0)').css({ left: 0 });
                 if (t === s) { $(o.slides, obj).children(':eq(0)').css({ left: (s * w) }); }
                 if (t === 1) { $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w }); }
                 $(o.slides, obj).children().fadeIn(o.fadespeed);
                 u = false;
            });
            break;
        default:
            break;
    }
};

【讨论】：

【解决方案4】：

我使用了以下代码，这似乎对我有用：

      case "next":
          times = times+1;
          distance = (-(times*width-width));
          current(times);
          if(o.autoHeight){autoHeight(times);}
          $(o.slides,$t).children().fadeOut(o.fadespeed, function(){
              $(o.slides,$t).css({left: distance});
              $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:slides*width-width});
              $(o.slides,$t).children(":eq(0)").css({left:0});
              if(times===slides+1){
               times = 1;
              distance = (-(times*width-width));
              current(times);
               }
              if(times===slides)
              {$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
              if(times===slides-1)
              {$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
              $(o.slides,$t).children().fadeIn(o.fadespeed);
              active = false;;
              });
              break;

我希望这对某人有帮助:)

【讨论】：

【解决方案5】：

这是我的代码版本。这会将默认幻灯片效果更改为淡入/淡出效果。我正在使用 loopedSlider 0.5.5 - jQuery 插件。自动启动功能也运行良好。您会注意到下面有重复的代码行。您可以自己轻松解决此问题。

    function animate(dir,clicked){
        active = true;
        switch(dir){
            case "next":
                if(times>slides-1){ times = 0; }
                times = times+1;
                distance = (-(times*width-width));
                current(times);
                if(o.autoHeight){autoHeight(times);}
                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: distance});
                    $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width});
                    $(o.slides,obj).children(":eq(0)").css({left:0});
                    if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
                    if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    active = false;
                });
                break;

            case "prev":
                if(times==1){ times = slides+1; }
                times = times-1;
                distance = (-(times*width-width));
                current(times);
                if(o.autoHeight){autoHeight(times);}
                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: distance});
                    $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width});
                    $(o.slides,obj).children(":eq(0)").css({left:0});
                    if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
                    if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    active = false;
                });
                break;

            case "fade":
                times = [times]*1;
                distance = (-(times*width-width));
                current(times);
                if(o.autoHeight){autoHeight(times);}
                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: distance});
                    $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width});
                    $(o.slides,obj).children(":eq(0)").css({left:0});
                    if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
                    if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    active = false;
                });
                break;

            default:
                break;
            }
        };
    });

如果这有助于解决您的问题，请告诉我。

【讨论】：