Coisa rápida… nosso velho e conhecido slideshow.

Porém, denovo, apenas para deixar registrado aqui, a flexibilidade de uso do plugin jQuery.Cycle, e a facilidade de implementação.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle-2.97.all.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('#slideshow2').cycle({
    fx: 'fade',
    next: '#proxima',
    prev: '#anterior'
  });
  jQuery('#pausa').click(function(){
    $('#slideshow2').cycle('pause');
  });
  jQuery('#play').click(function(){
    $('#slideshow2').cycle('resume');
  });
});
</script>
<style type="text/css">
* {
  margin: 0; padding: 0; border: none;
}
body { font: 12px Arial; }
#slideshow2 {
  list-style: none;
  height: 185px;
  width: 220px;
  overflow: hidden;
}
#slideshow2 li {
  height: 100%;  
}
#slideshow2 p {
  font-weight: bold;
  font-size: 13px;
}
#ctrls img { cursor: pointer; }
</style>
</head>
<body>
  <ul id="slideshow2">
    <li>
      <a href="?noticia=2660/nivel-de-estoques-de-aco-e-positivo--mas-perspectiva-e-de-queda-dos-precos-do-setor">
        <img src="uploads/20111123-213901.jpg" alt="Metalurgia e Distribuição" />
      </a>
      <p>Nível de estoques de aço é positivo, mas perspectiva é de queda d...</p>
    </li>
    <li>
      <a href="?noticia=2660/nivel-de-estoques-de-aco-e-positivo--mas-perspectiva-e-de-queda-dos-precos-do-setor">
        <img src="uploads/20111123-213612.jpg" alt="Metalurgia e Distribuição" />
      </a>
      <p>Inscrições para concurso da Petrobras começam nesta quinta salári...</p>
    </li>
    <li>
      <a href="?noticia=2660/nivel-de-estoques-de-aco-e-positivo--mas-perspectiva-e-de-queda-dos-precos-do-setor">
        <img src="uploads/20111122-230224.jpg" alt="Metalurgia e Distribuição" />
      </a>
      <p>Engenheiro norte-americano cria moto elétrica com uma roda só</p>
    </li>  
  </ul><!-- /slideshow2 -->
  
  <div id="ctrls">
    <img src="img/slide_anterior.gif" width="76px" height="20px" alt="anterior" id="anterior" />
    <img src="img/slide_play.gif" width="23px" height="20px" alt="play" id="play" />
    <img src="img/slide_pausa.gif" width="23px" height="20px" alt="pausa" id="pausa" />
    <img src="img/slide_proxima.gif" width="73px" height="20px" alt="proxima" id="proxima" />
  </div><!-- /ctrls -->
</body>
</html>

É isso ai. Comentem!

Demonstração