Jquery – Transição slide infinita

Eae rapaziada

Como eu coloquei no post anterior uma transição infinita em alfa agora vou colocar uma com slide é bem simples aqui eu to passando a ação de dois botões e também um exemplo com set interval.

O exemplo pode ser visto na mesma página do post anterior que eu coloquei nos comentários.

Bom vamos lá a ação do botão voltar fica a seguinte:

$(“id do botão”).click(function(){ // id do botão que vai fazer a ação
var img = $(“ul.total li:last”).clone(); // copio o ultimo elemento
$(“ul.total li:last”).remove(); // removo ele
$(“ul.total”).prepend(img); // adiciono no começo da ul
$(“ul.total”).css({“marginLeft”:”-280px”}); // deixo a ul na posição dois no caso 280px q é o tamanho de cada elemento
$(“ul.total”).animate({“marginLeft”:”0″},500); // volto a ul pra posição incial fazendo o movimento de transição
return false;
});

Já a ação do botão de ir para frente fica assim:

$(“id do botão”).click(function(){// id do botão que vai fazer a ação
$(“ul.total”).animate({“marginLeft”:”-280″},500,function(){ // movimento a ul para a segunda posição
var img = $(“ul.total li:first”).clone(); // copio o primeiro elemento
$(“ul.total li:first”).remove(); // removo ele
$(“ul.total”).append(img); // adiciono no final da ul
$(“ul.total”).css({“marginLeft”:”0px”}); // volto a ul pra posição inicial
});
return false;
});

O automático eu uso a ação do botão ir para frente a diferença é a ausencia do evento:

setInterval(function(){
$(“ul.total”).animate({“marginLeft”:”-280″},500,function(){ // movimento a ul para a segunda posição
var img = $(“ul.total li:first”).clone(); // copio o primeiro elemento
$(“ul.total li:first”).remove(); // removo ele
$(“ul.total”).append(img); // adiciono no final da ul
$(“ul.total”).css({“marginLeft”:”0px”}); // volto a ul pra posição inicial
});
},5000); // intervalo de 5 segundos

A montagem do exemplo segue o seguinte padrão:

<div class=”galeria”>
<a href=”#” id=”botao direito”>></a>
<a href=”#” id=”botao esquerdo”><</a>
<ul class=”total”>
<li><img src=”#”/></li>
<li><img src=”#”/></li>
</ul>
</div>

As li devem ser no minimo 2.

O css fica a critério da sua necessidade assim como o quanto a galeria irá se movimentar no caso aqui 280px.

É isso comentários são sempre bem vindos e respondo sempre que posso.

Tem o meu twitter @superjacaman

Dúvidas usem comentem aqui que eu ajudo a entender mas espero que tenha ficado claro.

Até