Para eso sirve liScroll, un plugin basado en jQuery con el cual podremos trasformar una lista de elementos desordenados en un “desplazador” horizontal, para noticias, eventos, noticias destacadas o lo que queramos. Aquí tenéis una demo. Vamos a ver como implementarlo.

Lo primero es descargar el script y jquery (usar botón derecho>guardar enlace como en ambos casos) y crear un .html, guardarlo con el nombre que prefiráis. Seguido incluimos las dos librerías entre las etiquetas head /head:

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>

Creamos la estructura para llamar al script, también entre head /head:

PLAIN TEXT
JavaScript:
<script type="text/javascript">
$(function(){
    $("ul#ticker01").liScroll();
});
</script>

Y los estilos que nos proporcionan (para cambiar el aspecto esto será lo que modificaremos)

PLAIN TEXT
CSS:
<style type="text/css">
/* liScroll style declarations */

.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 738px;
height: 27px;
margin: 0 auto;
padding: 0
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>

Finalmente creamos la estructura html entre body /body:

PLAIN TEXT
HTML:
<ul id="ticker01">
    <li><span>10/10/2007</span><a href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li>
    <li><span>10/10/2007</span><a href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li>
    <li><span>10/10/2007</span><a href="#/ogt/content/news/News177.complete">The code that you want to run</a></li>
    <li><span>08/10/2007</span><a href="#/ogt/content/news/News176.complete">Inside of which is the code that you want to run</a></li>
    <li><span>08/10/2007</span><a href="#/ogt/content/news/News178.complete">Right when the page is loaded</a></li>
</ul>

Si queremos aumentar o disminuir la velocidad en la que se muestran los elementos, añadiremos la función “travelocity”, quedando de esta manera:

PLAIN TEXT
JavaScript:
$(function(){
    $("ul#ticker01").liScroll({travelocity: 0.15});
});

Enlace liScroll (a jQuery News Ticker made easy) 1.0

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC