[Jquery] Cuadro de noticias.

<script type="text/javascript" src="http://design-ofw.host22.com/PWG/cuadronoticias/jquery00.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
   var first = 0;
   var speed = 700;
   var pause = 3500;
   
      function removeFirst(){
         first = $('ul#listticker li:first').html();
         $('ul#listticker li:first')
         .animate({opacity: 0}, speed)
         .fadeOut('slow', function() {$(this).remove();});
         addLast(first);
      }
      
      function addLast(first){
         last = '<li style="display:none">'+first+'</li>';
         $('ul#listticker').append(last)
         $('ul#listticker li:last')
         .animate({opacity: 1}, speed)
         .fadeIn('slow')
      }
   
   interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#listticker{
   height:200px;
   width:400px;
   overflow:hidden;
   border:solid 1px #DEDEDE;
   padding:6px 10px 14px 10px;;
}
#listticker li{
   border:0; margin:0; padding:0; list-style:none;
}

   #listticker li{
      height:60px;
      padding:5px;
      list-style:none;
   }
      #listticker a{
         color:#000000;
         margin-bottom:
      }
      #listticker .news-title{
         display:block;
         font-weight:bold;
         margin-bottom:4px;
         font-size:11px;
      }
      #listticker .news-text{
         display:block;
         font-size:11px;
         color:#666666;
      }
      #listticker img{
         float:left;
         margin-right:14px;
         padding:4px;
         border:solid 1px #DEDEDE;
      }
</style>

<ul id="listticker">
   <li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/10000000.png" />
      <a href="" class="news-title">Titulo 1</a> Contenido de la Noticia 1</li>

   <li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/20000000.png" /><a href="" class="news-title">Titulo
      2</a> Contenido de la Noticia 2</li>
   <li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/30000000.png" />
      <a href="" class="news-title">Titulo 3</a> Contenido de la Noticia 3</li>
   <li>

      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/40000000.png" />
      <a href="" class="news-title">Titulo 4</a> Contenido de la Noticia 4</li>
</ul>

<li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/30000000.png" />
      <a href="" class="news-title">Titulo 3</a> Contenido de la Noticia 3</li>