[Resolvido] Paginação JCycle

[Gustavo H. Rorato 2]

Bom galera vou explicar o meu problema. Eu tenho 4 banners em meu site usando as animações do JCycle, logo em baixo eu tenho quatro botões que eu mesmo fiz. Meu problema e fazer essa ligação entre eles.Fazer com que aqueles botões lá em baixo sejam a minha paginação.Já tentei de diversas formas, só que ele acaba sempre quadriplicando um botao :(.

 

Meu codigo js que seria a animacao do meu banner.

 

$(function(){
$("#bg_banner").cycle({ //faz o fade da imagem do banner
	fx: 'fade',
	speed: 1500,
	//rev: 1,
	timeout: 300000,
	prev : '#prev',
	next : '#next',
               pager : '#pager'
})

$("#orgBanner ul").cycle({ //faz o fade do texto do banner
	fx: 'fade', 
	speed: 800,
	timeout: 300000,
	speedIn:1000,
	speedOut:1000,
	prev: '#prev',
	next: '#next',
	pager : '#pager' 
})
}); 

Como está no html

<div id="bg_banner"> //imagens do banner
       <div class="banner_1"></div>
       <div class="banner_2"></div>
       <div class="banner_3"></div>
       <div class="banner_4"></div>
</div>
 <div id="orgBanner"> //escrito do banner
         <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
          </ul>
</div>

   <div id="menuM"> //menu banner
       <ul id="nav-shadow">
         <li class="button-color-1"><a href="#" title="teste1" alt="Slide 1"></a></li>
         <li class="button-color-2"><a href="#" title="teste2"  alt="Slide 2"></a></li>
         <li class="button-color-3"><a href="#" title="teste3" alt="Slide 3"></a></li>
         <li class="button-color-4"><a href="#" title="teste4" alt="Slide 4"></a></li>
       </ul>
     </div>
   </div>

 

Meu menu tem um efeito de sombra e tal, entao vou colocar o js se precisar

$(document).ready(function() {
$("#nav-shadow li").append('<img class="shadow" src="Imagens/sombra_11.png" width="197" height="15" alt="" />'); 

	$("#nav-shadow li").hover(function() {
		var e = this;
	    $(e).find("a").stop().animate({ marginTop: "-20px" }, 250, function() {
	    	$(e).find("a").animate({ marginTop: "-10px" }, 250); 
	    });
	    $(e).find("img.shadow").stop().animate({ width: "100%", height: "15px", marginLeft: "8px", opacity: 0.25 }, 250);

	},function(){
		var e = this;
	    $(e).find("a").stop().animate({ marginTop: "0px" }, 250, function() {
	    	$(e).find("a").animate({ marginTop: "0px" }, 250);
	    });
	    $(e).find("img.shadow").stop().animate({ width: "100%", height: "15px", marginLeft: "0", opacity: 1 }, 250);
	});


});

 

Preciso muito disso, se alguem conseguir, muito obrigado mesmo

Abraço

[Gustavo H. Rorato 2]

Tentei fazer o seguinte, usar paginacao normal e colocar por cima dos meus botoes utilizando isso >http://malsup.com/jquery/cycle/pager2.html.

Deixando a paginacao invisivel,beleza,mas ai nao pega o efeito do menus, porque ta link sobre link (+-isso).

 

Me ajudem ai galera, to precisando disso mesmo :(

Abraco

[Gustavo H. Rorato 2]

Depois de horas consegui resolver meu problema.

Resolvido

[JCMais 75]

Se puder, poste como resolveu, pode ajudar outros que tenham a mesma dúvida. :thumbsup:

[Gustavo H. Rorato 2]

meu codigo html eu deixei só a div e a <ul>

<div id="menuM">     
       <ul id="nav-shadow">
       </ul>
     </div>

   </div>

A alteração que funcionou foi dentro da função pager do cycle:

 

a = '<li class="button-color-'+(i+1)+'"><a href="#">'+(i+1)+'</a></li>';

 

$(function() {   
   $('#bg_banner').cycle({
       fx:     'fade',
	prev: '#prev',
	next: '#next',
       speed: 1500,
       timeout: 300000,
       pager:  '#nav-shadow'
   });

 

Qualquer duvida só perguntar

Abraço