Slideshow - Jquery Cycle

Boa tarde pessoal.

Estou tendo problemas comm um Slideshow feito em Jquery Cycle e CSS, e gostaria da ajuda de vocês...

O efeito do slide está funcionando corretamente. O problema na verdade é os Botoezinhos de paginação que eu criei.Segue um Print:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i51.tinypic.com/2khg6x.jpg&key=e2ca1a812acea96be997d2fcd21f60142afcf7a51a45255f7003e710a8ab2122" alt="2khg6x.jpg" /> São esses 3 ai,

Voltando ao problema, Eles contem um link pra cada imagem que tem no slide, no total 3. Só que eles funcionam de vez em quando...

Especificando:

Eu clicko neles e nada acontece, mais se eu atualizar a pagina algumas vezes eles funcionam.

Outra coisa, Em vez de o link pegar o Quadradinho todo do Botão, ele pega só um pedaço de baixo; Print:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i52.tinypic.com/25u0jz9.jpg&key=a51e273e46749c1af5efc83c509b3c6c39d7c45e4a25589517955cd6d51ede89" alt="25u0jz9.jpg" />

Disso aqui, quando ele resolve pegar o link funciona só essa parte que está em vermelho; Print:/applications/core/interface/imageproxy/imageproxy.php?img=http://i51.tinypic.com/3519tmf.jpg&key=46d15414add3392e7e1696dbead55a30d2fa784c59477aa32797c154d2616593" alt="3519tmf.jpg" />

HTML

<div id="destaques">
 <div id="noticias_destaque">
 <ul>
 <li>
 <img src="uploads/noticias/01.JPG" alt="" width="500px" height="300px" />
 <p>
 <a href="#">
 <h1>Lorem ipsum dolor sit amet 01</h1>
 consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 </a>
 </p>
 </li>

 <li>
 <img src="uploads/noticias/01.JPG" alt="" width="500px" height="300px" />
 <p>
 <a href="#">
 <h1>Lorem ipsum dolor sit amet 02</h1>
 consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
 laoreet dolore magna aliquam erat volutpat.
 </a>
 </p>
 </li>

 <li>
 <img src="uploads/noticias/01.JPG" alt="" width="500px" height="300px" />
 <p>
 <a href="#">
 <h1>Lorem ipsum dolor sit amet 03</h1>
 consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
 laoreet dolore magna aliquam erat volutpat.
 </a>
 </p>
 </li>
 </ul>
 </div> <!-- NOTICIAS DESTAQUE -->
 <span id="pager" class="pager"></span>
 </div> <!--DESTAQUES-->

CSS

#noticias{
width:900px;
}
#destaques{
width:500px;
float:left;
background:#EBEBEB;
margin:5px;
padding:5px;
overflow:hidden;
}
#noticias_destaque{
width:500px;
height:366px;
}
.pager{
width:500px;
text-align:right;
float:left;
}

.pager a{

padding:5px;
text-decoration:none;
color:#069;
background:#FFF;
margin:0 1px;
}

#noticias_destaque ul{

list-style:none;
}

#noticias_destaque h1{

font:16px Georgia, "Times New Roman", Times, serif;
color:#333;
font-weight:bold;
text-shadow:1px 1px 1px #999;
}

#noticias_destaque h1:hover{

text-shadow:1px 1px 1px #069;
}

#noticias_destaque p{

font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin:0 0 10px 0;
}

#noticias_destaque a{

color:#333;
text-decoration:none;
}

#noticias_destaque a:hover{

color:#000;
text-decoration:underline;
}

Jquery

$(function(){
$("#noticias_destaque ul").cycle({
fx:'fade',
speed: 1500,
timeout: 5000,
pager: '#pager'
})
})

Então essa é minha duvida!!! ja fiz isso umas duas vezes e sempre dá o mesmo problema, nesses benditos...

Agradeço a atenção!!!