Tema: Header JQuery
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 19/05/2011, 20:15
Expression
 
Fecha de Ingreso: octubre-2010
Ubicación: Mexico
Mensajes: 19
Antigüedad: 14 años
Puntos: 0
Respuesta: Header JQuery
Cita:
Iniciado por Dany_s Ver Mensaje
te cree una guia/explicación

basicamente es hacer un loop y trabajar con un div para ocultarlo, mover al siguiente y mostrarlo, dejando una bandera que en este caso seria el de la clase .visible por eso el addClass y removeClass

Código Javascript: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Ejemplo</title>
  4.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  5.  
  6.         <script>
  7.  
  8.     $(function() {
  9.         //Opacidad 0 a los div que no tenga clase .visible
  10.         $('#slider .seccion.visible').siblings('.seccion').animate({opacity: 0}, 0);
  11.  
  12.         //Ejecuto funcion slider
  13.         slider();
  14.  
  15.         function slider(){
  16.             //Selecciono el div con clase .visible
  17.             $('#slider .seccion.visible')
  18.             //Para que permanezca visible la seccion hago un delay con la cantidad de segundos que se quiera mantener
  19.             .delay(3000)
  20.             //Luego del delay realizo la animación que es darle una opacidad a 0
  21.             .animate({opacity: 0}, 500, function(){
  22.                 //Cuando termina la animación le borro la clase visible
  23.                 $(this).removeClass('visible');
  24.                 //Selecciono el div que se encuentra a continuación del div con el que se está trabajando
  25.                 siguiente = $(this).next();
  26.                 //Si no encuentra un div es porque se está trabajando soble el último div, entonces selecciono el primero
  27.                 if (!siguiente.length)
  28.                     siguiente = $('#slider .seccion:eq(0)');
  29.                 //Le agrego la clase visible y le doy opacidad para que se muestre
  30.                 siguiente.addClass('visible').animate({opacity: 1}, 500);
  31.                 //Vuelvo a ejecutar la función slider();
  32.                 slider();
  33.             });
  34.         }
  35.  
  36.     });
  37.  
  38.  
  39.         </script>
  40.  
  41.     <style>
  42.         #slider { background:#000; position:relative }
  43.         #slider, .seccion{ height:100px;}
  44.         .seccion{ position:absolute; width:100%}
  45.         .uno { background:red }
  46.         .dos { background:blue }
  47.         .tres { background:green }
  48.         .cuatro{ background:yellow}
  49.         h1{margin:0}
  50.     </style>
  51.  
  52. </head>
  53. <body>
  54.  
  55.  
  56.     <div id="slider">
  57.         <div class="seccion uno visible">
  58.             <h1>Sección Uno</h1>
  59.         </div>
  60.         <div class="seccion dos">
  61.             <h1>Sección Dos</h1>
  62.         </div>
  63.         <div class="seccion tres">
  64.             <h1>Sección Tres</h1>
  65.         </div>
  66.         <div class="seccion cuatro">
  67.             <h1>Sección Cuatro</h1>
  68.         </div>
  69.     </div>
  70.  
  71. </body>
  72. </html>


Pero puedes buscar algún plugin si no lo puedes adaptar a tus necesidades
Justo eso es Dany, pero como se agrega lo de atras o adelante, para yo poder mover a la seccion que yo quiera?