Как заменить эффект слайда на эффект затухания / затухания в этом слайд-шоу? - PullRequest
Новая
       34

Как заменить эффект слайда на эффект затухания / затухания в этом слайд-шоу?

0 голосов
/ 31 августа 2009

Мне нужно заменить эффект слайда на эффект постепенного исчезновения / постепенного появления на 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);}
            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

Пожалуйста, помогите мне! (Извините за мой плохой английский!)

Ответы [ 5 ]

2 голосов
/ 01 сентября 2009

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) затем изменить prev и next функции в стороне switch оператор: 

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
2 голосов
/ 27 ноября 2009

Это легко редактировать. 

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;
    }
};
2 голосов
/ 31 августа 2009

Я не проверял это, но все, что я сделал, это заменил функцию .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;
                        }
1 голос
/ 25 июля 2011

Вот моя версия кодов. Это изменит эффект слайда по умолчанию на эффект постепенного исчезновения / затухания. Я использую 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;
            }
        };
    });

Пожалуйста, дайте мне знать, если это поможет решить вашу проблему.

1 голос
/ 29 июня 2010

Я использовал следующий код, который, кажется, работает для меня: 

      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;

Надеюсь, это кому-нибудь поможет :)

...