Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

- KbeçãO -

[Resolvido] Banner dinamico...

Recommended Posts

Bom dia iMasters....

Estou fazendo um novo site..

e ainda revendo meus conceitos de construção web....

parei de usar iFrame, aprendi um pouco de CSS, e ja tenho uma base em PHP...

mas JS :unsure: ...

então quero pedir a ajuda de vcs...

bomo consigo fazer uma banner dinamico como esse ?

não precisa nem ter o efeito de transição dos quadrados...

so uma transição de alpha está exelente...

se algm poder me ajudar...

desde ja agradeço..

^^

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso ai é um plugin, é só você baixar e usar.

 

leia a documentação é assim que você vai aprender.

 

outra sugestão mais simples:

http://jquery.malsup.com/cycle/

Compartilhar este post


Link para o post
Compartilhar em outros sites

? cara... faz o teu html

<ul id="id_do_slide"> 
 <li><img src="...</li>
 <li><img src="...</li>
</ul>

 

chama as tags script da lib jQuery e do plugin

e depois em outra você coloca:

$(document).ready(function(){
   $('#id_do_slide').cycle();
});

 

pronto, tá aplicado.

O cycle não é esse link q você postou. Esse ai é um complemento que ele pode usar, dependendo da transição que você escolher.

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha so....

 

<script type="text/javascript" src="jquery-1.5.js"></script> //biblioteca

<script type="text/javascript" src="jquery.easing.1.3.js"></script> //plugin do efeito

<script type="text/javascript">
$(document).ready(function() {
   $('#efeito').cycle({
   fx:    'fade',
   speed:  2500
});

</script>

 

html

 

<ul class="pics" id="efeito">
       <li> <img alt="" src="P1010002.jpg" width="200" height="200" /></li>
       <li><img alt=""  src="P1010005.jpg" width="200" height="200" /></li>
       <li><img alt=""  src="P1010008.jpg" width="200" height="200" /></li>
</ul>

 

oq ta errado ???

Compartilhar este post


Link para o post
Compartilhar em outros sites

como eu disse, tá faltando o cycle

você colocou o jQuery e o Easy, mas faltou o cycle

Compartilhar este post


Link para o post
Compartilhar em outros sites

pra mim esse easy era o plugin cycle...

Oo

vo procura akew...

 

bom...

baixei o plugin

 

agora ficou assim...

 

<script type="text/javascript" src="js/jquery-1.5.js"></script>

<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<!-- efeito -->
<script type="text/javascript">

$(document).ready(function() {
   $('.pics').cycle({
   fx:    'fade',
   speed:  2500
});


</script>

 

html

 

<div class="pics">
       <img alt="" src="P1010002.jpg" width="200" height="200" />
       <img alt=""  src="P1010005.jpg" width="200" height="200" />
       <img alt=""  src="P1010008.jpg" width="200" height="200" />
</div>

 

mas ainda n deu...

:cry:

Compartilhar este post


Link para o post
Compartilhar em outros sites

erro de sintaxe no jQuery, faltou você fechar o escopo do document.ready

 

 

<script type="text/javascript">
$(document).ready(function(){
$('.pics').cycle({
	fx:    'fade',
	speed:  2500
});
});
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

FUNFOOOOOOOOOOOOOOOOOOUUUUUUUUUUUUUUUUUUUUUUUUUUU

=D

 

vo dexa o codigo pra quem precisar....

 

<head>

<script type="text/javascript" src="js/jquery-1.5.js"></script>

<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<!-- efeito -->
<script type="text/javascript">

$(document).ready(function() {
   $('.pics').cycle({
   fx:    'fade',
   speed:  2500

   });
});

</script>

</head>

 

<div class="pics">
       <img alt="" src="P1010002.jpg" width="200" height="200" />
       <img alt=""  src="P1010005.jpg" width="200" height="200" />
       <img alt=""  src="P1010008.jpg" width="200" height="200" />
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.