Foros del Web » Programando para Internet » Javascript »

Rotor de Capas

Estas en el tema de Rotor de Capas en el foro de Javascript en Foros del Web. Hola, Quisiera consultar algo y si estoy en la categoria equivocada me perdonen y lo muevan. Para darles la ruta correcta de lo que quiero, ...
  #1 (permalink)  
Antiguo 09/05/2009, 21:18
 
Fecha de Ingreso: marzo-2009
Mensajes: 30
Antigüedad: 15 años, 1 mes
Puntos: 0
Rotor de Capas

Hola,

Quisiera consultar algo y si estoy en la categoria equivocada me perdonen y lo muevan.

Para darles la ruta correcta de lo que quiero, entra a nba.com (colocar la triple doble W), te encontraras con la foto mas grande o noticia principal de esa pagina, no es mas que un conjunto de 5 Fotos que exponen igual cantidad de noticias.

La pregunta es, ¿esas son capas que rotan a unos 7 segundos automáticamente?, o será una mezcla tambien de Java.

¿Sabes si existe algo parecido en alguna web, que explique como se hace. Yo juego con eso de las capas, pero no se darle la función de que roten solas a determinado tiempo.

Si te fijas, se puede parar la rotación, con tan solo poner el mause en cualquier zona de la foto y si ponemos el mause encima de una de las 5 casillitas de abajo, nos muestra la foto sin tener que dar clic en ella.

Quisiera algo así.

Espero respuesta.
  #2 (permalink)  
Antiguo 10/05/2009, 02:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 10 meses
Puntos: 361
Respuesta: Rotor de Capas

Hola:

Ese efecto está hecho con javascript, así que mejor es que preguntes a los expertos del foro de javascript que sabrán asesorarte mejor que yo.

Saludos.

  #3 (permalink)  
Antiguo 10/05/2009, 18:33
 
Fecha de Ingreso: marzo-2009
Mensajes: 30
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Rotor de Capas

Okey, gracias Jomaruro
  #4 (permalink)  
Antiguo 11/05/2009, 03:51
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Respuesta: Rotor de Capas

Hola rickyl

Efectivamente puedes hacerlo con javascript. No creo que tenga mayor dificultad; puedes crear los distintos cuadros y hacer que ocupen la misma posición con css y mostrar sólo uno en cada momento llamando cada cierto tiempo a una función que se ocupe de cambiarles su visibilidad.

Voy a trasladar tu consulta al foro de javascript para que te orienten los expertos un poco más al detalle

Tema trasladado desde Web general

un saludo
__________________
Javascript Códigos - Bambú difunde
  #5 (permalink)  
Antiguo 11/05/2009, 06:11
Avatar de AnesGy  
Fecha de Ingreso: mayo-2009
Mensajes: 518
Antigüedad: 14 años, 11 meses
Puntos: 19
Respuesta: Rotor de Capas

busca en w3cschools la propiedad de java setTimeout.

COn un poco de lógica lo conseguiras en casi nada de tiempo.
  #6 (permalink)  
Antiguo 11/05/2009, 18:18
 
Fecha de Ingreso: marzo-2009
Mensajes: 30
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Rotor de Capas

Heeeey!!, muchas gracias Tunait y AnesGy,

Tan bien, las disculpas por colocar el tema donde no iba, no estaba seguro que tenía javaScript hasta que lo consulté a fondo.

No es una tarea fácil para quien no conoce de la Rama Java, así que si pueden desmenuzar ese sistema de noticias y ayudarme se los agradecería en el alma.

No tiene importancia lo lindo o feo que les quede, en funcionando tal cual, yo hago el resto.

Muchas gracias.
  #7 (permalink)  
Antiguo 11/05/2009, 19:48
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Rotor de Capas

Yo he creado ese efecto, pero realmente me parece que se ve mejor si lo haces con flash...te da mas posibilidades con menos código(Mas fácil). Reflejo, sombra, desacelerar, retorno.

NOTA: No digo que no se pueda hacer con java script

Busca por Carrusel de imagenes.
  #8 (permalink)  
Antiguo 11/05/2009, 21:30
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Rotor de Capas

umm... aqui deje uno paresido, deja encontrarlo....

Aqui:
http://www.forosdelweb.com/f13/esto-...script-673423/
respuesta numero 26.

No hace todo lo que quieres, pero es un comienzo para que puedas tener una base.
__________________
twitter: @imbuzu
  #9 (permalink)  
Antiguo 12/05/2009, 03:45
Avatar de AnesGy  
Fecha de Ingreso: mayo-2009
Mensajes: 518
Antigüedad: 14 años, 11 meses
Puntos: 19
Respuesta: Rotor de Capas

El problema de flash es que si no tienes el plug in no se ve. Hazlo con java, no est an complicado.

El código HTML

Para hacer el sistema necesitas un DIV con un fondo de imagen (mejor que poner una imagen, así es más compatible) y que todas las imágenes sean del mismo tamaño. En el ejemplo de la NBA lo hacen con una imagen, pero este método me resulta más sencillo de explicar.

El div donde se mostrará la imagen tendrá unas dimensiones (las de todas las imágenes) y tendrá un atributo id que le daremos el valor de "cajadeimagen"

Código HTML:
<div style="width: 400px;height:300px" id="cajadeimagen">
 
</div> 
Todavía quedan los botones que los vemos mas tarde.


Ahora para el código de JAVASCRIPT

Este se coloca al final del body (o después del DIV que hicimos antes) entre etiquetas de <script type="text/javascript"> y </script>


La idea es que tienes una variabe

Código javascript:
Ver original
  1. var time;

en esta variable metremos el timeout (time = setTimeout(tantos segundos)). Esta variable la queremos para hacer el efecto de los botones.

Ahora tenemos una matriz con las imágenes y un índice:


Código javascript:
Ver original
  1. var matriz = Array("imagen1.jpg", "imagen2.jpg", "imagen3.jpg");
  2. var indice = 0;

Este ejemplo solo tiene tres imágenes.

Ahora tendremos una variable que haga referencia al DIV que contiene las imágenes:

Código javascript:
Ver original
  1. var mydiv = document.getElementById("cajadeimagen");

Ahora haremos una llamada inicial para que inicialmente la caja tenga una imagen:

Código javascript:
Ver original
  1. mydiv.style.backgroundImage=matriz[0];

Y definimos el timeout (8 segundos = 8000 milisegundos):

Código javascript:
Ver original
  1. time = setTimeout("cambiardeimagen()",8000);

Ahora hacemos la función cambiardeimagen() que nos permite cambiar las imágenes:

Código javascript:
Ver original
  1. var time;
  2. function cambiardeimagen(){
  3.  indice += 1;
  4.  if(indice == matriz.length){indice=0;}
  5.  mydiv.style.backgroundImage=matriz[indice];
  6. }

Todo junto:

Código javascript:
Ver original
  1. var matriz = Array("imagen1.jpg", "imagen2.jpg", "imagen3.jpg");
  2. var indice = 0;
  3. mydiv.style.backgroundImage=matriz[0];
  4. time = setTimeout("cambiardeimagen()",8000);
  5. function cambiardeimagen(){
  6.  indice += 1;
  7.  if(indice == matriz.length){indice=0;}
  8.  mydiv.style.backgroundImage=matriz[indice];
  9. }


Ahora quedan los botones

Los botones los colocas donde quieras, puedes hacer tantos como imágenes haya, y estos los puedes generar con PHP o con javascript.

En los botones hay que tener dos atributos:

onmousemove="clearTimeout(time);"
onmouseout="time = setTimeout("cambiardeimagen()",8000);"
  #10 (permalink)  
Antiguo 12/05/2009, 13:23
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Rotor de Capas

No concuerdo con que sea mejor usar una imagen de fondo que la etiqueta <img>. Si quieres poner una imagen, lo más lógico es usar un elemento <img> o al menos eso pienso yo.

Saludos
__________________
twitter: @imbuzu
  #11 (permalink)  
Antiguo 12/05/2009, 14:24
Avatar de AnesGy  
Fecha de Ingreso: mayo-2009
Mensajes: 518
Antigüedad: 14 años, 11 meses
Puntos: 19
Respuesta: Rotor de Capas

Si, pero para poner botones delante de la imagen tendrías que usar position y no voy a explicar ahora mismo cual es el que ha de usar. Como dije, explico este sistema por que es más rápido de explicar.
  #12 (permalink)  
Antiguo 12/05/2009, 14:29
 
Fecha de Ingreso: marzo-2009
Mensajes: 30
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Rotor de Capas

Gracias por el interés que han mostrado, es lo que hace grande estos foros.

¿como iría el HTML entonces?, ...nunca he trabajado con PHP aún.

Trataba de analiza la de la NBA pero no me daja ver los botones.

El código de la NBA, es bastante largo... A ver si sé publicarlo en su caja aquí. Solo para que lo vean, si no es permitido lo borran.

Gracias.-

Código javascript:
Ver original
  1. // Parses in Unix Time and prints out formatted timestamp
  2. function nbaRenderTimeStamp(date,timeString) {
  3.  
  4. nbaStoryPublishTime = (date) ? new Date(date) : nbaStoryPublishTime;
  5. var days = new Array('Sun','Mon','Tue','Wed','Thur','Fri','Sat');
  6. var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
  7. var nbaDay = days[nbaStoryPublishTime.getUTCDay()];
  8. var nbaMonth = months[nbaStoryPublishTime.getUTCMonth()];
  9. var nbaYear = nbaStoryPublishTime.getUTCFullYear();
  10. var nbaDate = nbaStoryPublishTime.getUTCDate();
  11. var nbaHour = nbaStoryPublishTime.getHours();
  12. var nbaMinutes = nbaStoryPublishTime.getMinutes();
  13. var nbaAMPM = '';
  14. var nbaDateSuffix='';
  15.  
  16. //Set am/pm
  17. if (nbaHour   > 11) {
  18. nbaAMPM = "pm";
  19. }else{
  20. nbaAMPM = "am";
  21. }
  22.  
  23. // Set Hour
  24. if (nbaHour   > 12) { nbaHour = nbaHour - 12;}
  25.  
  26. // Add a zero if less than 10
  27. if (nbaMinutes < 10){nbaMinutes = "0" + nbaMinutes;}
  28.  
  29. // Add number suffix
  30. if (nbaDate == 1){
  31. nbaDateSuffix = "st";
  32. }else if (nbaDate == 2) {
  33. nbaDateSuffix = "nd";
  34. }else if (nbaDate == 3) {
  35. nbaDateSuffix = "rd";
  36. }else{
  37. nbaDateSuffix = "th";
  38. }
  39. document.write(nbaMonth + '&nbsp;' + nbaDate+nbaDateSuffix+'&nbsp;'+ nbaYear + ' ' + nbaHour+ ':' +nbaMinutes+ '&nbsp;' +nbaAMPM);
  40.  
  41. }
  42.  
  43. // T1 functionality
  44.     var stories = new Array('nbaT1Story1','nbaT1Story2','nbaT1Story3','nbaT1Story4','nbaT1Story5');
  45.     var rotate = null;
  46.     var r = 1;
  47.    
  48.     function nbaRotateT1() {
  49.         nbaShowT1(r);
  50.         if (r < 5) {
  51.             rotate = setTimeout('nbaRotateT1()',15000);
  52.         } else if (r = 5) {
  53.             r = 0;
  54.             rotate = setTimeout('nbaRotateT1()',15000);
  55.         }
  56.         r++;
  57.     }
  58.    
  59.     function nbaRotateT1Continue(){
  60.         clearTimeout(rotate);
  61.         rotate = null;
  62.        
  63.         //push to next position
  64.         //r = ( (r+1) >= 1 && (r+1) <= 5) ? (r+1) : 1;
  65.         nbaRotateT1();
  66.     }
  67.     function nbaSetPosition(oPosition){
  68.         r = oPosition;
  69.         //alert("position: " + r);
  70.     }
  71.    
  72.     function nbaShowT1(n) {
  73.     // changes visibility of current story
  74.         for (i = 0; i < stories.length; i++) {
  75.             if (document.getElementById(stories[i])) {
  76.                 document.getElementById(stories[i]).style.display = (('nbaT1Story' + n) == stories[i]) ? 'block':'none';
  77.             }
  78.         }
  79.        
  80.     // Gets current position of the array
  81.  
  82.     // changes class of current thumb
  83.     var thumbs = document.getElementById('nbaT1Thumbs').getElementsByTagName('a'); 
  84.         for (j = 0; j < thumbs.length; j++) {
  85.             thumbs[j].className = ((j + 1) == n) ? 'nbaSelected':'';
  86.         }
  87.        
  88.         //set the positon of the rotate array
  89.         nbaSetPosition(n);
  90.     }
  91.  
  92.  
  93.  
  94. //Switcher functionality for nba store
  95. var si = 1;
  96.  
  97. function swicththis2(che){
  98.         var attera = "";
  99.         if(che == 1)
  100.         {        si = si + 1;
  101.                  if(si > 5){ si = 1;}
  102.                  attera = 's' + si;
  103.         }
  104.         if(che == 2)
  105.         {        si = si - 1;
  106.                  if(si < 1){ si = 5;}
  107.                  attera = 's' + si;
  108.         }
  109.         document.getElementById('scounter').innerHTML =  si;
  110.         var jumps = 0;
  111.         var storejump =new Array("s1","s2","s3","s4","s5");
  112.     for (jumps;jumps<=4;jumps++)
  113.     {
  114.             document.getElementById(storejump[jumps]).style.display = "none";
  115.     }
  116.     document.getElementById(attera).style.display = "block";
  117. }
  118.  
  119. var Fabtabs = Class.create();
  120.  
  121. Fabtabs.prototype = {
  122.     initialize : function(element) {
  123.         try{
  124.         this.element = $(element);
  125.         var options = Object.extend({}, arguments[1] || {});
  126.         this.menu = $A(this.element.getElementsByTagName('a'));
  127.         this.show(this.getInitialTab());
  128.         this.menu.each(this.setupTab.bind(this));
  129.         }
  130.         catch(err)
  131.         {
  132.         }
  133.     },
  134.     setupTab : function(elm) {
  135.         Event.observe(elm,'click',this.activate.bindAsEventListener(this),false)
  136.     },
  137.     activate :  function(ev) {
  138.         var elm = Event.findElement(ev, "a");
  139.         Event.stop(ev);
  140.         this.show(elm);
  141.         this.menu.without(elm).each(this.hide.bind(this));
  142.     },
  143.     hide : function(elm) {
  144.         try{
  145.         $(elm).removeClassName('active-tab');
  146.         $(this.tabID(elm)).removeClassName('active-tab-body');
  147.         }
  148.         catch(err)
  149.         {
  150.         }
  151.     },
  152.     show : function(elm) {
  153.         try{
  154.         $(elm).addClassName('active-tab');
  155.         $(this.tabID(elm)).addClassName('active-tab-body');
  156.         }
  157.         catch(err)
  158.         {
  159.         }
  160.     },
  161.     tabID : function(elm) {
  162.         return elm.href.match(/#(\w.+)/)[1];
  163.     },
  164.     getInitialTab : function() {
  165.         if(document.location.href.match(/#(\w.+)/)) {
  166.             var loc = RegExp.$1;
  167.             var elm = this.menu.find(function(value) { return value.href.match(/#(\w.+)/)[1] == loc; });
  168.             return elm || this.menu.first();
  169.         } else {
  170.             return this.menu.first();
  171.         }
  172.     }
  173. }
  174.  
  175.  
  176. Event.observe(window,'load',function(){ new Fabtabs('tabs'); },false);
  177. Event.observe(window,'load',function(){ new Fabtabs('nbaSubNav'); },false);
  178. Event.observe(window,'load',function(){ new Fabtabs('subNbaTvTabs'); },false);
  179. Event.observe(window,'load',function(){ new Fabtabs('subTopPlaysTabs'); },false);
  180. Event.observe(window,'load',function(){ new Fabtabs('subTntOvertimeTabs'); },false);
  181. Event.observe(window,'load',function(){ new Fabtabs('subBarkleyTabs'); },false);
  182.  
  183.  
  184. // Headline Tabs
  185. function HideLinks() {
  186.     var MainLinks = new Array ("nbaRailPodsnav1", "nbaRailPodsnav2");
  187.     var SubLinks = new Array ("nbaRailPodsnavL", "nbaRailPodsnavR");
  188.     for (var i=0; i<MainLinks.length; i++) {
  189.         document.getElementById(MainLinks[i]).className = "nbaRailPodsNavItem";
  190.         document.getElementById(MainLinks[i]).hideFocus = true;
  191.     }
  192.     for (var i=0; i<SubLinks.length; i++) {
  193.         document.getElementById(SubLinks[i]).className = "nbaRailPodsnavL hide";
  194.     }
  195. }
  196. function ShowLink(MainLinkId, SubLinkId) {
  197.     document.getElementById(MainLinkId).className = "nbaRailPodsNavItem RailPodsNavactive";
  198.     document.getElementById(SubLinkId).className = "nbaRailPodsnavL show";
  199. }
  200. function ActiveMenu(MainLinkId, SubLinkId) {
  201.     HideLinks();
  202.     ShowLink(MainLinkId, SubLinkId);
  203. }  
  204.  
  205. // Zebra color for Headline div
  206. function init() {
  207. alternate('nbaTabHeader');
  208. }
  209. function alternate(nbaTabHeader){
  210.  if(document.getElementsByTagName){  
  211.    var list = document.getElementById(nbaTabHeader);  
  212.    var rows = list.getElementsByTagName("li");  
  213.    for(i = 0; i < rows.length; i++){          
  214.  //manipulate rows
  215.      if(i % 2 == 0){
  216.        rows[i].className = "nbaHeadlinesLiBg";
  217.      }
  218.    }
  219.  }
  220. }
  221.  
  222.  
  223.  
  224.  
  225. window.onload = function (){
  226. nbaRotateT1();
  227. init();
  228. }
  #13 (permalink)  
Antiguo 12/05/2009, 14:34
 
Fecha de Ingreso: marzo-2009
Mensajes: 30
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Rotor de Capas

Cita:
Iniciado por AnesGy Ver Mensaje
Si, pero para poner botones delante de la imagen tendrías que usar position y no voy a explicar ahora mismo cual es el que ha de usar. Como dije, explico este sistema por que es más rápido de explicar.
Si no me equivoco AnesGy, los botones están dentro de una capa flotante, igual que el texto, que tiene como fondo una imagen en transparencia JPNG para dar el gris oscuro sobre la foto.

Última edición por rickyl; 12/05/2009 a las 14:36 Razón: Para corregir lo de la imágen de fondo.
  #14 (permalink)  
Antiguo 12/05/2009, 15:52
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Rotor de Capas

ya checaste el enlace que te pase?
__________________
twitter: @imbuzu
  #15 (permalink)  
Antiguo 12/05/2009, 18:33
 
Fecha de Ingreso: marzo-2009
Mensajes: 30
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Rotor de Capas

Sí buzu, muchas gracias, son diferentes pero mas o menos parecidos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:26.