Pergunta
Eu tenho uma imagem, quando pairei sobre ela, sou capaz de ver as setas esquerda e direita ... quando clico em uma seta, estou mudando o ator de origem da imagem usando jQuery ... então sou bem -sucedido em mudar as imagens em Clicando nas setas .. o que eu quero é, como faço para que a apresentação de slides seja ... o tapinha de animação onde a imagem atual desliza para a direita e uma nova imagem desliza da esquerda quando a seta esquerda é clicada ... por favor me ajude isso ... eu não quero usar os plugins já existentes ... obrigado antecipadamente ...
Solução
Para fazer isso, eu teria dois blocos, um para a imagem antiga e outro para os novos (ambos com hidden).
Posições iniciais:
old - normal new - right margin = width of image
No tick de animação, por exemplo, a cada 0,05 segundos
old - left margin+1 new right margin-1
Até o velho deslizar e o novo entrou.
Outras dicas
Eu sugeriria que você use os recursos animados da JQuery. Olhe para http://api.jquery.com/animate/ Para maiores informações.
Este é um trabalho de animação personalizado feito, encontre o violino
$('.arrowRight').on('click', function(e) {
var currLandscape = $(this).siblings(".currImg");
var prevLandscape = currLandscape.prevAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var prevDesc= currDesc.prevAll(".hiddenDesc").first();
if (prevLandscape.length == 0) {
prevLandscape = currLandscape.siblings('.hiddenImg').last();
}
if (prevDesc.length == 0) {
prevDesc= currDesc.siblings('.hiddenDesc').last();
}
prevLandscape.show("slide", { direction: "right" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
prevDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
prevLandscape.removeClass('hiddenImg').addClass('currImg');
});
$('.arrowLeft').on('click',function(e) {
var currLandscape = $(this).siblings(".currImg");
var nextLandscape = currLandscape.nextAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var nextDesc= currDesc.nextAll(".hiddenDesc").first();
if (nextLandscape.length == 0) {
nextLandscape = currLandscape.siblings('.hiddenImg').first();
}
if (nextDesc.length == 0) {
nextDesc= currDesc.siblings('.hiddenDesc').first();
}
nextLandscape.show("slide", { direction: "left" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
nextLandscape.removeClass('hiddenImg').addClass('currImg');
});