ejemplo1

by MARCASTELEON

HTML

<div id="la" class="a">&lt;</div>
<div id="menu">
    <ul id="elementos">
       <li>
         <a href="#">1</a>
       </li>
       <li>
         <a href="#">2</a>
       </li>
       <li>
         <a href="#">3</a>
       </li>
       <li>
         <a href="#">4</a>
       </li>
       <li>
         <a href="#">5</a>
       </li>
       <li>
         <a href="#">6</a>
       </li>
       <li>
         <a href="#">7</a>
       </li>
       <li>
         <a href="#">8</a>
       </li>
       <li>
         <a href="#">9</a>
       </li>
       <li>
         <a href="#">10</a>
       </li>
       <li>
         <a href="#">11</a>
       </li>
       <li>
         <a href="#">12</a>
       </li>
       <li>
         <a href="#">13</a>
       </li>
       <li>
         <a href="#">14</a>
       </li>
       <li>
         <a href="#">15</a>
       </li>
       <li>
         <a href="#">16</a>
       </li>
       <li>
         <a href="#">17</a>
       </li>
       <li>
         <a href="#">18</a>
       </li>
    </ul>
</div>
<div id="ra" class="a">&gt;</div>

CSS

.a{ float:left; margin:0px 5px; cursor:pointer;}

#menu{ float:left; width:50px; height:20px; background-color:#CCCCCC; overflow:hidden;}
 
#elementos{ width:105px;; list-style:none; margin:0px; padding:0px;}
 
#elementos li{ display:inline;}

JavaScript

//configuracion
desplazamiento={
paso:5,//cantidad de pixeles que desplaza el contenido por vez
eje:"x",//eje en el que se va a realizar el desplazamiento(y Ăł x)
idIzqArr:"la",//id del objeto que activa el desplazamiento hacia la izquierda o arriba
idDerAba:"ra",//id del objeto que activa el desplazamiento hacia la derecha o abajo
idObj:"menu",//id del elemento que va a ser desplazado
    }
 
window.onload=function(){
document.getElementById(desplazamiento.idIzqArr).onclick=desplazar;
document.getElementById(desplazamiento.idDerAba).onclick=desplazar; }
                        
function desplazar(){
var obj=document.getElementById(desplazamiento.idObj);
(desplazamiento.eje=="x")?obj.scrollLeft+=(this.id==desplazamiento.idIzqArr)?desplazamiento.paso*-1:desplazamiento.paso:obj.scrollTop+=(this.id==desplazamiento.idIzqArr)?desplazamiento.paso*-1:desplazamiento.paso;  }