[Resolvido] Banner em Jquery

[willwalker 2]

Estou querendo aprender a fazer um banner onde por meio de li´s uso appendTo para pegar o primeiro li, colocar no final e fazer com que o banner nunca pare de rodar.

 

Só que eu tentei fazer e deu alguns problemas e não estou conseguindo fazer. Alguem pode me ajudar nisso. É mais para aprendizado. Sei que tem vários prontos por ai. Mas é meio dificil ler 900 linha de javascript só pra saber como dar um scroll infinito no banner.

 

Abraços Walker

[William Bruno 1501]

você vai pegar qntos banners você tem.

 

.length na quantidade de lis.

 

em cada volta do serInterval(), você verifica se um contador arbitrario var i, é menor que a sua quantidade de lis.

Qndo ele deixar de ser menor, você zera o contador i

 

if( i>lis.length ) i = 0;

 

 

entendeu ?

[willwalker 2]

Entendi perfeitamente, mas acho que tu não entendeu. Tenho um ul assim:

 

<ul>

<li><img src="imagem.jpg" /></li>

<li><img src="imagem.jpg" /></li>

<li><img src="imagem.jpg" /></li>

<li><img src="imagem.jpg" /></li>

<li><img src="imagem.jpg" /></li>

</ul>

 

Esses li´s estão com float left, e quero rodar eles sequencialmente, mas quando for para o segundo li, quero pegar o primeiro li e colocar no final, e assim por diante. Para que o banner nunca pare de rodar. Estou usando um plugin chamado ScrollTo para poder dar scroll no banner. Porque eu tambem não sei como eu poderia navegar entre as li´s.

 

Me dê uma luz Willian =D

 

Abraços

[willwalker 2]

Obs.: Eles estão dentro de um div com overflow hidden.

[William Bruno 1501]

tá.. mas ai você cria uma rolagem apenas de ida.. apenas para a direita. É isso mesmo ?

 

cara, se não me engano, existia um método jQuery q removia o elemento de um lugar, e jogava em outro..

enfim.. não achei.

 

então você pode copiar o elemento para mémoria( acessando ele, e capturando o .html() dele), usar um .remove() nele, e depois um .append() na UL.

E já que você sempre vai jogar 'o primeiro' para frente, você nunca vai precisar variar o número.

 

sempre no elemento .eq( 0 )

[willwalker 2]

Mas então eu fiz da seguinte maneira:

 

$.fn.jbnr = function(options){
var config = {
	tempo: 3000
};

if(options){
	$.extend(config, options);
};

var idd = $(this).attr("id");

setInterval(function() {
	$("#"+idd).scrollTo(".jbnr:eq(1)", 100, function(){
		$(".jbnr:eq(0)").appendTo("#jbnr");
	});
}, config.tempo);
};

 

 

Não está funcionando. =/

[William Bruno 1501]

quem é o elemento com class .jbnr ? cada LI tem essa class ?

 

essa tua forma de usar os seletores está muito estranha. Usa o objeto logo, não precisa pegar o ID, para depois ir no parser e achar o objeto de novo!

[willwalker 2]

Consegui Willian, era um erro de posicionamento. Ficou assim o plugin:

 

$.fn.jbnr = function(options){
var config = {
	tempo: 3000
};

if(options){
	$.extend(config, options);
};

var idd = $(this).attr("id");

setInterval(function() {
	$("#"+idd).scrollTo(".jbnr:eq(1)", 800, function(){
		$("#"+idd).scrollTo(".jbnr:eq(0)", 0000, function(){
			$(".jbnr:eq(0)").appendTo("#jbnr");
		});
	});
}, config.tempo);
};

 

[William Bruno 1501]

sugestão de melhoria, para desempenho:

 

 

        var $this = $( this );

       setInterval(function() {
               $this.scrollTo(".jbnr:eq(1)", 800, function(){
                       $this.scrollTo(".jbnr:eq(0)", 0000, function(){
                               $(".jbnr:eq(0)").appendTo("#jbnr");
                       });
               });
       }, config.tempo);

além disso considere usar jQuery para plugins, em vez de $