Tema: Crear Banner Rotatorio para Web
Ver Mensaje Individual
  #10 (permalink)  
Antiguo 10/06/2011, 09:28
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: Crear Banner Rotatorio para Web
El paginado se agrega solo y las clases no vas a verlas a menos que uses un inspector de elementos (como el de Chrome). Creo que debería haberte dado más información :P

El enmarcado que el plugin genera es este:
Código HTML: 
Ver original
  1. <div class="rotar_paginado">
  2.     <ol>
  3.         <li>
  4.             <a href="#" class="paginado_actual">1</a>
  5.         </li>
  6.         <li>
  7.             <a href="#" class="">2</a>
  8.         </li>
  9.     </ol>
  10. </div>

La clase "paginado_actual" va rotando entre los elementos para mostrar cual es el actual. Entonces, en tu CSS apuntá a esa clase para dar el estilo de "activo" (puede ser usar de fondo el cosito azul que querías) y a los demás con otro estilo (el boton rojo).

Para que te los muestre alineaditos deberías flotarlos. Acá te paso otro ejempl rápido para que veas:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
  2. <html>
  3.   <head>
  4.     <title>Divs Rotatorios con Paginado</title>
  5.   </head>
  6.   
  7.   <style type="text/css">
  8.     /*simple reset*/
  9.     *{margin:0; padding:0;}
  10.     
  11.     /*estilizar los banners */
  12.     #banners ul > li{
  13.         width:200px;
  14.         height:200px;
  15.         list-style:none;
  16.         background:yellow;
  17.     }
  18.     
  19.     /*estilo para TODOS los items del paginado*/
  20.     .rotar_paginado li{
  21.         float:left;
  22.         margin:5px;
  23.     }
  24.     /*estilo para SOLO para el item de paginado actual*/
  25.     .paginado_actual{
  26.         color:red;
  27.         background:blue;
  28.         font-weight:bold;
  29.     }
  30.  
  31.   </style>
  32.   <script type="text/javascript" src="jquery-1.5.1.min.js" ></script>
  33.   <script type="text/javascript" src="rotar.divs.js" ></script>
  34.   <script type="text/javascript">
  35.     $(function(){
  36.         $('#banners').rotarContenedores({
  37.             tiempo : 1000,  // tiempo de espera entre cada transicion
  38.             auto : true     // rotar automaticamente?
  39.         });
  40.     });
  41.   </script>
  42.   <body>
  43.     <div id="banners">
  44.         <ul>
  45.             <li><h2>Contenedor 1</h2></li>
  46.             <li><h2>Contenedor 2</h2></li>
  47.             <li><h2>Contenedor 3</h2></li>
  48.             <li><h2>Contenedor 4</h2></li>
  49.             <li><h2>Contenedor 5</h2></li>
  50.         </ul>
  51.     </div>
  52.   </body>
  53. </html>

Le puse otros estilos más para que entiendas.
__________________
nahueljose.com.ar