Comunidad de diseño web y desarrollo en internet online

Ayuda con carrusel de imagenes

Citar            
MensajeEscrito el 06 Ene 2007 08:00 pm
Hola!
Estoy haciendo un carrusel de imagenes modificando el code de otro que no me convencia, es una tira de imagenes que al presionar un boton estas se van desplazando. Yo queria que se movieran a cada golpe de boton de cuatro en cuatro y este code solo lo hace de uno en uno. Tengo 12 imagenes, quiza alguien pueda echarme una mano, aquí lo dejo:

Código :

onClipEvent (load)
{
   n_fotos=12; // numero de elementos de la tira
   esp=10; //espaciado en pixels entre clips
   desp=foto1._width+esp; //desplazamiento por clic
   moviendo=false; // estado que indica si la tira esta en movimiento o no
   dir=0; //valor de la direccion del movimiento, 0 izquierda, 1 derecha
   
   //Calculamos los topes de la tira.
   tope_izq=foto4._x;
   tope_der=foto1._x;
   tope=foto1._x;
   
   /FUNCION QUE CONTROLA LOS BOTONES/
   
   function botones()
   {
   if (foto1._x>=tope_der)
      {
      //apagamos boton derecho cuando la foto 1 ha superado o igualado en el eje x el tope derecho de la tira
      _parent.boton_der._visible=0;
      }
      else
      {
         // si no esta la foto1 en el tope derecho, activamos el boton derecho de la tira
         _parent.boton_der._visible=1;
      }
      if (eval("foto"+n_fotos)._x<=tope_izq)
      {
      //apagamos boton izquierdo cuando la foto final esta igual o mas a la izquierda que el tope izquierdo
      _parent.boton_izq._visible=0;
      }
      else
      {
         // si no esta mas a la izquierda que el tope izquierdo lo habilitamos
         _parent.boton_izq._visible=1;
      }
   }
   
   /FUNCION QUE MUEVE LA TIRA/                                            

   function mover(direccion)
   {
      // se le pasa la direccion en la que se quiere mover, a esta funcion se le llama desde      el evento de clic de los dos botones de la tira: 0 es izquierda y 1 es derecha
      if (!moviendo) 
      {
         if (!direccion) //direccion false
         {
            // Estamos en el caso de que la tira no se estaba moviendo 
            // y se ha pulsado el boton de la izquierda 
            if (eval("foto"+n_fotos)._x>tope_izq)
            {
               // Si _x de la foto del extremo derecho de la tira es mayor que el tope izquierdo
               tope=foto1._x-desp;
               moviendo=true;
               dir=0;
            }
         }
         else
         {
            // Estamos en el caso de que la tira no se estaba moviendo
            // y se ha pulsado el boton derecho
            if (foto1._x<tope_der)
            {
               // Si la _X de la foto del extremo izquierdo de la tira es menor que el tope derecho
               tope=eval("foto"+n_fotos)._x+desp;
               moviendo=true;
               dir=1;
            }
         }
      }
   }
}

onClipEvent (enterFrame)
{
   // Este evento hace lo siguiente:
   // Cada frame analiza si los botones deben estar activos o desactivados en funcion
   // de la posicion de la tira y ademas, en el caso de que algun boton se haya pulsado
   // (moviendo==true) analiza la direccion del movimiento y ejecuta el script que
   // desplaza todos los elementos de la tira hacia ese lado (parte del FOR).
   if (moviendo)
   {
      botones();
      switch (dir)
      {
         case 0: 
         vel=Math.abs(tope-foto1._x)/2;
         for (i=1; i<=n_fotos; i++)
         {
            eval("foto"+i)._x-=vel;
         }
         if (foto1._x<=tope+0.3) 
         {
            eval("foto"+1)._x=tope;
            for (i=2; i<=n_fotos; i++)
            {
               eval("foto"+i)._x=eval("foto"+(i-1))._x+desp;
            }
            moviendo=false;
            tope=0;
            dir=0;
         }         
         break;
         
         case 1:
         vel=Math.abs(tope-eval("foto"+n_fotos)._x)/2;
         for (i=n_fotos; i>=1; i--)
         {
            eval("foto"+i)._x+=vel;
         }
         if (eval("foto"+n_fotos)._x>=tope-0.3) 
         {
            eval("foto"+n_fotos)._x=tope;
            for (i=(n_fotos-1); i>=1; i--)
            {
               eval("foto"+i)._x=eval("foto"+(i+1))._x-desp;
            }
            moviendo=false;
            tope=0;
            dir=1;
         }
         break;
      } // cierre del switch
   }
   else
   {
      botones();
   }      
}

En el boton izquierdo este code:

Código :

on (release)
{
   _root.tira.mover(0);
}

Y en el boton derecho este otro:

Código :

on (release)
{
   _root.tira.mover(1);
}

Lo que quiero es que se muevan las imagenes de cuatro en cuatro.
Gracias por la ayuda

Por celentano

Claber

123 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Ene 2007 09:13 pm
Estas 2 líneas determinan la velocidad, cambialas, pero mantené la estructura que ya tienen.

Código :

vel=Math.abs(tope-foto1._x)/2;


Código :

vel=Math.abs(tope-eval("foto"+n_fotos)._x)/2;


He aquí un ejemplo que acelera las fotos:

Código :

vel=Math.abs(tope-foto1._x);


Código :

vel=Math.abs(tope-eval("foto"+n_fotos)._x);



De todos modos, puede que se me esté escapando algo ya que no analicé el código en profundidad.

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 06 Ene 2007 10:21 pm
Entiendo lo que quieres decir pero eso solo modificaría la velocidad. Yo lo que pretendía era que las fotos pasaran, al pulsar el boton derecho o izquierdo, de cuatro en cuatro. En este ejemplo al pulsar solo se mueve una foto quedando las siguientes tres todavia en escena. Para agilizar el carrusel queria que pasaran en tandas de cuatro.
No sé si me explique con claridad. Gracias por la ayuda.

Por celentano

Claber

123 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 07 Ene 2007 07:47 am
Call me wizard, pero creo que tu problema esta aca

Código :

desp=foto1._width+esp; //desplazamiento por clic
por lo que veo esta variable controla es desplazamiento que se le hace por click, y si te fijas las funciones de mover

Código :

   /FUNCION QUE MUEVE LA TIRA/                                            

   function mover(direccion)
   {
      // se le pasa la direccion en la que se quiere mover, a esta funcion se le llama desde      el evento de clic de los dos botones de la tira: 0 es izquierda y 1 es derecha
      if (!moviendo) 
      {
         if (!direccion) //direccion false
         {
            // Estamos en el caso de que la tira no se estaba moviendo 
            // y se ha pulsado el boton de la izquierda 
            if (eval("foto"+n_fotos)._x>tope_izq)
            {
               // Si _x de la foto del extremo derecho de la tira es mayor que el tope izquierdo
               tope=foto1._x-desp;
               moviendo=true;
               dir=0;
            }
         }
         else
         {
            // Estamos en el caso de que la tira no se estaba moviendo
            // y se ha pulsado el boton derecho
            if (foto1._x<tope_der)
            {
               // Si la _X de la foto del extremo izquierdo de la tira es menor que el tope derecho
               tope=eval("foto"+n_fotos)._x+desp;
               moviendo=true;
               dir=1;
            }
         }
      }
   }
}

veras que para calcular el tope usa esa variable.
Espero que te sirva.

Por Dientuki

Claber

2021 de clabLevel

11 tutoriales
1 articulo

Genero:Masculino   Héroes

Front-end Ninja

firefox
Citar            
MensajeEscrito el 07 Ene 2007 04:01 pm
Si, eso lo tengo claro (sobre todo porque viene explicado en los comentarios). El problema es que cuando cambio esta variable "desp" modifica de alguna manera el comportamiento del carrusel, es decir:
-las imagenes que tengo son de ancho 60
-el espacio entre imagenes es 10
-la variable esp=10
-le pongo valor desp=270 (4 imagenes x 60 = 240 + (3x10))

Pero esto modifica el comportamiento porque una vez presionado el boton para que avanzen las cuatro primeras imagenes, estas lo hacen correctamente pero despues cambia el espaciado entre imagenes.

Por celentano

Claber

123 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 07 Ene 2007 05:49 pm
fijate que en
[code]onClipEvent (enterFrame)[/url]
tambien se usa la variable desp, prueba con crear otra variable (ej, desp2) y usar una para la funcion de mover y otra para la funcion del onClipEvent.

Por Dientuki

Claber

2021 de clabLevel

11 tutoriales
1 articulo

Genero:Masculino   Héroes

Front-end Ninja

firefox
Citar            
MensajeEscrito el 07 Ene 2007 07:31 pm
Funciona!
Le puse una nueva variable:
desp=280
y cambié la funcion mover:

Código :

function mover(direccion){
      if (!moviendo)//moviendo es false {
         if (!direccion) //direccion false{
            if (eval("foto"+n_fotos)._x>tope_izq){
               // cambio desp por desp2
               tope=foto1._x-desp2;
               moviendo=true;
               dir=0;
            }
         }
         else {
            if (foto1._x<tope_der){
               // cambio desp por desp2
               tope=eval("foto"+n_fotos)._x+desp2;
               moviendo=true;
               dir=1;
            }
         }
      }
   }
}

Muchas gracias. Todavía me quedo con la duda de porque la funcion mover cambiaba el espacio entre fotos cuando este era fijo. No lo entiendo aunque lo miro mil veces. Lo que aquí haces es añadirle una nueva variable independiente que solo sirve para esta funcion mientras que el resto sigue funcionando igual pero ¿donde afectaba al espacio entre fotos?
Bueno, muchas gracias otra vez por tu ayuda.

Por celentano

Claber

123 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.