Crear Banner Rotatorio para Web

jmc11jj · #1 (**permalink**) 09/06/2011, 15:16

Hola. Estoy investigando sobre banner rotatorio con imagenes para un sitio web. Aunque estoy algo confundido al respecto.

Lo que deseo es colocar 5 imagenes que se vayan rotando en orden, y a la vez, existan unos botones de paginacion donde se pueda seleccionar la imagen para visualizarla.

Naahuel · #2 (**permalink**) 09/06/2011, 16:24

Bueno yo tengo hecho un pequeño script en jQuery que realiza esa tarea. Me han señalado con mucha razón que tal vez no es lo mejor incluir una librería completa sólo para realizar algo tan sencillo, pero tiene la ventaja de que es un código corto y bien comprensible.

Cambiar la imagen de fondo aleatoriamente

Fijate en el código fuente de los demos que suelen dar una mejor idea. :)

Naahuel · #3 (**permalink**) 09/06/2011, 16:31

Alternativamente a cambiar el fondo, tenés este otro ejemplo para intercambiar contenedores completos:

Contenedores rotatorios

jmc11jj · #4 (**permalink**) 09/06/2011, 18:34

Gracias Naahuel, pero los links estan rotos y no pude revisarlos.

Naahuel · #5 (**permalink**) 09/06/2011, 18:37

Si, funcionaba en el instante que los puse pero mi servidor está caído (y por tanto un gran número de sitios de clientes). Debería estar funcionando ahora.

Me avisás si todavía no lo podés ver y los pongo acá :)

Naahuel · #6 (**permalink**) 09/06/2011, 18:46

Jeje, se volvieron a tropezar :P

Bueno acá al menos lo podés leer y tiene la explicación pero no podrás ver los demos:
Contenedores rotatorios

No es dificil, cualquier duda que tengas la vemos acá

jmc11jj · #7 (**permalink**) 10/06/2011, 05:56

Muchisimas Gracias naahuel. Ahora, como puedo hacer que ese banner rotatorio automático se pueda paginar de acuerdo al numero de contenedores ?. Ejemplo:

http://imageshack.us/photo/my-images/863/bannerex.jpg/

Gracias ...

Naahuel · #8 (**permalink**) 10/06/2011, 08:30

Bueno te hice un ejemplo con paginado:
Contenedores rotatorios en jquery con paginado

Te dejo a vos la estilización. Te lo facilité usando clases. El banner actual tiene la clase "actual" y el numerito de paginado actual tiene la clase "paginado_actual". Eso te va a facilitar estilizarlos.

Acá lo podés bajar

jmc11jj · #9 (**permalink**) 10/06/2011, 09:18

Estoy practicando con el banner rotatorio que baje del ejemplo que me has dado.

Sin embargo, tengo dudas al respecto. Hay una clase llamado .paginado_actual, a la cual se hace referencia en los estilos CSS, pero la cual no logro ver en la estructura HTML.

A esta clase .paginado_actual le he colocado display: inline en los estilos css pero no se ejecuta en realidad, visualizando el paginado_actual en forma vertical, un numero debajo del otro.

Naahuel · #10 (**permalink**) 10/06/2011, 09:28

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<div class="rotar_paginado">
    <ol>
        <li>
            <a href="#" class="paginado_actual">1</a>
        </li>
        <li>
            <a href="#" class="">2</a>
        </li>
    </ol>
</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<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <title>Divs Rotatorios con Paginado</title>
  </head>
  
  <style type="text/css">
    /*simple reset*/
    *{margin:0; padding:0;}
    
    /*estilizar los banners */
    #banners ul > li{
        width:200px;
        height:200px;
        list-style:none;
        background:yellow;
    }
    
    /*estilo para TODOS los items del paginado*/
    .rotar_paginado li{
        float:left;
        margin:5px;
    }
    /*estilo para SOLO para el item de paginado actual*/
    .paginado_actual{
        color:red;
        background:blue;
        font-weight:bold;
    }
 
  </style>
  <script type="text/javascript" src="jquery-1.5.1.min.js" ></script>
  <script type="text/javascript" src="rotar.divs.js" ></script>
  <script type="text/javascript">
    $(function(){
        $('#banners').rotarContenedores({
            tiempo : 1000,  // tiempo de espera entre cada transicion
            auto : true     // rotar automaticamente?
        });
    });
  </script>
  <body>
    <div id="banners">
        <ul>
            <li><h2>Contenedor 1</h2></li>
            <li><h2>Contenedor 2</h2></li>
            <li><h2>Contenedor 3</h2></li>
            <li><h2>Contenedor 4</h2></li>
            <li><h2>Contenedor 5</h2></li>
        </ul>
    </div>
  </body>
</html>

Le puse otros estilos más para que entiendas.

jmc11jj · #11 (**permalink**) 10/06/2011, 09:39

Ok. Muchas Gracias Naahuel. Voy a practicar con esa información que me has suministrado.

Sabes que me encanto este slider que esta en tu sitio web:
http://www.nahueljose.com.ar/ejemplos/door-jquery-slideshow/

Aunque me gustaría ponerle un paginado. ¿Es posible?.

Naahuel · #12 (**permalink**) 10/06/2011, 09:44

Es un efecto que me gustó siempre a mi también, lo ví en los celulares Samsung :P

La verdad no sé si se podrá por la forma en que ese script trabaja (me compliqué la vida). Pero uno nunca sabe...

jmc11jj · #13 (**permalink**) 10/06/2011, 15:07

Utilice finalmente tu slider marca Nahuel.

Quedo muy bien. La verdad te felicito.

Me encanto como quedo.