Problem with jquery cycle.

Problem with jquery cycle.

I am having a big problem with a jquery plugin. I did one and it worked perfectly but when I did the same script in other html document it doesn't work like the other. I'm gonna put here the script for you.


<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="style/estilos1.css">


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

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


     

<style type="text/css">
body, td, th {
    color: #000;
}

p {
text-align:center;

}


</style>
</head>
<body>

<!-- header -->
<header id="header" class="row" role="banner">
  <div class="wrap"> <img src="images/banner_davinovo.png" border="0"></div>

  <div id="slides">
    <ul>
      <li><img src="images/foto_1.jpg" alt="Slide 1" /></li>
      <li><img src="images/foto_2.jpg" alt="Slide 2" /></li>
    </ul>
  </div>
</header>




And this is the frist one who I did:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slide Show - Jquery</title>
<link  href="style/estilos1.css" type="text/css" rel="stylesheet" />

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

<script type="text/javascript">
   $(function(){
         $("#slides ul").cycle({
            fx: 'fade',
            speed: 2500,
            timeout: 5000,
            prev : '#prev',
            next : '#next',
            pager : '#pager'
         })     
      })

     
</script>



</head>
<body>
<div id="slides">
   <ul>
      <li><img src="images/foto_1.jpg" alt="Slide 1" /></li>
      <li><img src="images/foto_2.jpg" alt="Slide 2" /></li>
     
   </ul>
</div>
<!--<p>
      <a href="#" id="prev">Anterior</a>
      <span id="pager"></span>
      <a href="#" id="next">Próximo</a>
</p>-->

</body>
</html>


If someone here knows about it, please tell me. I must to learn and know it... thanks guys.