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
Código:
</head>
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ⱣɃ