Como substituir o efeito do slide para desaparecer/desaparecer em vigor nesta apresentação de slides?
Pergunta
Eu preciso substituir efeito de deslizamento para Efeito de desbotamento/desbotamento no Anterior e próximo funções de slide:
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;
}
};
Eu tentei, mas o reinício automático não funcionou!
Você pode ver o documentação e baixe o código completo com os exemplos neste link:http://github.com/nathansarles/loopedslider/tree/master
Por favor me ajude! (Desculpe pelo meu inglês ruim!)
Solução
1) Eu introduzi uma variável para acompanhar a esquerda do contêiner em que mostramos coisas:
//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) Próximo modificar prev
e next
funções no lado switch
declaração:
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
Outras dicas
Não testei isso, mas tudo o que fiz foi substituir a função.
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;
}
Isso é fácil de editar.
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;
}
};
Eu usei o seguinte código, que parece funcionar para mim:
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;
Espero que isso ajude alguém :)
Aqui está minha versão dos códigos. Isso alterará o efeito de slide padrão para o efeito de desbotamento/desbotamento. Estou usando o loopedslider 0.5.5 - plugin jQuery. O recurso de início automático também está funcionando perfeitamente. Você notará que existem linhas duplicadas de códigos abaixo. Você pode facilmente resolver isso você mesmo.
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;
}
};
});
Informe -me se isso ajuda para resolver seu problema.