Código:
<link href="css/estilo.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js" ></script>
<script type="text/javascript"> $(function(){
$("#slides ul").cycle({
fx: 'fade',
speed: 2500,
timeout: 5000,
prev : '#prev', // volta a imagem
next : '#next', // passa a imagem
pager : '#pager' // contador de paginas
})
})
</script>
Isso coloca-se acima da tag
E isso:
Código:
<div id="slides"> <ul>
<li><img src="images/slide1.jpg" alt="Slide 1" /></li>
<li><img src="images/slide2.jpg" alt="Slide 2" /></li>
<li><img src="images/slide3.jpg" alt="Slide 3" /></li>
</ul>
</div>
<p>
<a href="#" id="prev">Anterior</a>
<span id="pager"></span>
<a href="#" id="next">Próximo</a>
</p>
Você deixa desta forma, em qualquer parte entre( <body> e </body>) :
Código:
<!-- Estiliza esta div de acordo com o que quizer --><div><!-- esta que está há esquerda --><div id="slides"> <ul>
<li><img src="images/slide1.jpg" alt="Slide 1" /></li>
<li><img src="images/slide2.jpg" alt="Slide 2" /></li>
<li><img src="images/slide3.jpg" alt="Slide 3" /></li>
</ul>
</div>
<p>
<a href="#" id="prev">Anterior</a>
<span id="pager"></span>
<a href="#" id="next">Próximo</a>
</p></div>
Este code foi feito em HTML caso vá usar em uma página .php remova está parte: <!-- Estiliza esta div de acordo com o que quizer --> e <!-- esta que está há esquerda -->
Aquele código css não precisa, pois já foi adicionado o link do css acima da tag head!
Baixe o que está descrito no primeiro post desse tópico!
Att. FuryousⱣɃ