Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 4 de 4

Tema: script transición de imagenes

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    29 feb, 08
    Mensajes
    23
    Poder de Reputación
    20

    script transición de imagenes

    Hola!
    vengo de nuevo con mi web, y tengo una duda.
    conseguí un script para transición de imagenes, que pondré aquí para el que quiera usarlo.
    El problema que tengo es que quiero que las imagenes, cuando se cambien, se desvanezcan, no que se cambien tan rápido como lo hacen. He buscado scripts, pero ninguno me sirve.
    ¿que debo añadirle al codigo para poner esa característica?
    mi web: http://www.lali-esposito.net
    Es el cuadro de imagenes central que van pasando.
    ¡gracias por adelantado!

    Aqui el código, que funciona perfectamente

    Código:
    <html>
    <head>
    <script language="Javascript" type="text/javascript">
    mis_imagenes = new Array("IMAGEN","IMAGEN","IMAGEN")
    mi_imagen = 0
    imgCt = mis_imagenes.length
    function rotacion() {
    if (document.images) {
    mi_imagen++
    if (mi_imagen == imgCt) {
    mi_imagen = 0
    }
    document.anuncio.src=mis_imagenes[mi_imagen]
    setTimeout("rotacion()", 5 * 1000)
    }
    }
    </script>
    </head>
    <body onload="rotacion()">
    [img]IMAGEN[/img]
    </body>
    </html>
    donde pone IMAGEN hay que poner las imagenes que queremos que vayan apareciendo.
    y colocar cada codigo en la parte que indica.
    Espero que os sirva!

    Saludos!

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 ene, 09
    Mensajes
    66
    Poder de Reputación
    18

    Creo que esto te puede servir

    Hola. Poahí publicaron algo sobre ese tipo de script.
    Y he marcado en rojo lo que puede ser la clave que puede solucionar tu pregunta.
    Hola a todos,

    Ya que tanto he recibido de CCTW, hoy quiero aportar un granito de arena. Por eso, aquí, les enseño paso a paso a hacer este excelente script (hacer clic en www.celuladeoracion.com para ver el script).

    Se llama rotación de imágenes y consta de 4 pasos:

    1. En la web que nos sirve de ejemplo aparecen 7 imágenes pero, nosotros solo vamos a ponerle 4 para simplificar; después, ponemos el número de imágenes a nuestro gusto. Eso sí, las 4 imágenes deben tener el mismo tamaño y debemos guardarla en una misma carpeta; digamos, dentro de la carpeta “objetos” si hemos seguimos el curso de Jorgens y las llamaremos imagenuno.jpg, imagendos.jpg, imagentres.jpg e imagencuatro.jpg.

    2. Ponemos el script justo arriba de la etiqueta de cierre del head de la siguiente forma:

    <script language="javascript">
    step=0;
    function autoImgFlip() {
    if (step < 3) {step++;}
    else {step=0;}
    if (step==0)
    {a.src="objetos/imagenuno.jpg";}
    if (step==1)
    {a.src="objetos/imagendos.jpg";}
    setTimeout("autoImgFlip()", 3000);
    if (step==2)
    {a.src="objetos/imagentres.jpg";}
    if (step==3)
    {a.src="objetos/imagencuatro.jpg";}

    }
    </script>
    </head>

    Aquí, ojo con lo siguiente:
    -El cero, “0”, también cuenta, así que si tenemos 4 imágenes, las contaremos 0,1, 2, 3.
    -Se debe poner la ruta completa de la imagen, por ejemplo, si están dentro de la carpeta “objetos” entonces pondremos:
    {a.src=”objetos/imagenuno.jpg”;}
    -El tiempo de rotación se define en la línea que dice setTimeout… Si queremos que las imágenes roten rápido le pondremos 1000 y durarán un segundo o 500 o 200. Si queremos que roten más lento ponemos 3000 y durarán 3 segundos como en la web que nos sirve de ejemplo (hasta puedes contar la exactitud!!!) Si se desea que la imagen se vea 4 segundos, se pondrá 4000 y así sucesivamente.

    3. Ahora, ponemos esta línea de código justo en la etiqueta de apertura del body y quedaría así:
    <body bgcolor="#ffffff" TEXT="#000000" link="#0000cd" vlink="#0000cd" alink="#ff0000" onLoad="autoImgFlip();">

    4. Y por último, ponemos el nombre de nuestra primera imagen en la capa donde irán las imágenes así:

    [img]objetos/imagenuno.jpg[/img]

    Es un excelente script que le da movimiento a nuestra web sin necesidad de saber o tener algún programa de animación. Si tienen algún problema para configurarlo, por favor, dejen un mensaje aquí mismo para solucinarlo o comenten qué tal les ha parecido. Saludos,

    Hola a todos nuevamente,

    estoy re-editando este post porque se pueden mejorar los códigos. En el punto 3 puse:

    3. Ahora, ponemos esta línea de código justo en la etiqueta de apertura del body y quedaría así:
    <body bgcolor="#ffffff" TEXT="#000000" link="#0000cd" vlink="#0000cd" alink="#ff0000" onLoad="autoImgFlip();">

    Esta línea de código se puede simplificar de tal modo que quedaría así:

    <body onLoad="autoImgFlip();">

    Mucho mejor no??? Y bueno, comenten qué tal les parece el script, no cuesta nada. saludos,
    La misma persona que publicó ese post, también publicó el siguiente donde menciona una mejor forma de hacer ese efecto

    Hola amigos,

    Aquí, lo ofrecido: la explicación PASO A PASO del script de rotación de imágenes con el difuminado (o esfumado). Se ve indefectiblemente en todos los navegadores. Realmente, es muy sencillo y consta de solo 5 pasos. Supongamos que trabajamos con 4 imágenes con un alto de 250px y un ancho de 450 px tal como en la web que nos sirve de ejemplo.

    1. Dentro del head en la hoja html (antes de la etiqueta de cierre) copian y pegan:

    <script type="text/javascript" src="crossfader.js"></script>
    <style type="text/css">
    #wrapper {float:right ;width:450px; height:250px}
    </style>


    2. Ahora, en el body, creamos un div para las imágenes al que llamaremos WRAPPER y copian y pegan lo siguiente:


    <div id="wrapper">
    <div class="cf_wrapper">
    <div class="cf_element" id="cf1">[img]imagenes/1.jpg[/img]</div>
    <div class="cf_element" id="cf2">[img]imagenes/2.jpg[/img]</div>
    <div class="cf_element" id="cf3">[img]imagenes/3.jpg[/img]</div>
    <div class="cf_element" id="cf4">[img]imagenes/4.jpg[/img]</div>
    </div>
    </div>

    Ojo donde dice “imagenes/1.jpg” porque imagenes es el nombre de MI carpeta. Aquí, ustedes le ponen el nombre de SU carpeta, ejemplo: “objetos/1.jpg”. Tampoco olviden modificar los px del widht y height según el tamaño de sus imágenes.
    Este es un ejemplo solo para 4 imágenes. Por cada imagen adicional que quieran poner, añadirán una línea más de código <div class=… cf5”, cf6, etc.

    3. En la hoja de estilo, le damos las propiedades al div; copien y peguen:

    #wrapper {text-align:left; height:250px; width:450px;}

    Por favor, no me pregunten por qué he puesto left si las imágenes están a la derecha.

    4. Copien y peguen los siguientes códigos justo antes de la etiqueta de cierre del body:

    <script type="text/javascript">
    var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4'), 2000, 2000 );
    </script>

    Si quieren poner más imágenes, añaden ‘cf5’, ‘cf6’ y así sucesivamente. La primera cifra 2000 corresponde exactamente al difuminado (más lento, 4000 o rápido, 500); y la segunda cifra 2000 corresponde al tiempo que permanecerá en exposición la imagen antes de pasar a la siguiente. Prueben cambiando las cantidades a su gusto.

    5. Finalmente, no se asusten con el siguiente código que solo tienen que copiarlo y pegarlo en el bloc de notas y nombrar el archivo como:

    crossfader.js

    Luego, suben el archivo a la raiz de la carpeta local e internet y eso es todo. Hemos terminado. Aquí, lo que tienen que copiar y pegar:


    Código:


    /**
    * author: Timothy Groves - http://www.brandspankingnew.net
    * version: 1.0 - 2006-09-25
    *
    * requires: nothing
    *
    */

    var useBSNns;

    if (useBSNns)
    {
    if (typeof(bsn) == "undefined")
    bsn = {}
    var _bsn = bsn;
    }
    else
    {
    var _bsn = this;
    }



    _bsn.Crossfader = function (divs, fadetime, delay )
    {
    this.nAct = -1;
    this.aDivs = divs;

    for (var i=0;i<divs.length;i++)
    {
    document.getElementById(divs[i]).style.opacity = 0;
    document.getElementById(divs[i]).style.position = "absolute";
    document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
    document.getElementById(divs[i]).style.visibility = "hidden";
    }

    this.nDur = fadetime;
    this.nDelay = delay;

    this._newfade();
    }


    _bsn.Crossfader.prototype._newfade = function()
    {
    if (this.nID1)
    clearInterval(this.nID1);

    this.nOldAct = this.nAct;
    this.nAct++;
    if (!this.aDivs[this.nAct]) this.nAct = 0;
    document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";

    this.nInt = 50;
    this.nTime = 0;

    var p=this;
    this.nID2 = setInterval(function() { p._fade() }, this.nInt);
    }


    _bsn.Crossfader.prototype._fade = function()
    {
    this.nTime += this.nInt;

    var op = this._easeInOut(this.nTime, 0, 1, this.nDur);
    var ieop = op*100;
    document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
    document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";

    if (this.nOldAct > -1)
    {
    document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
    document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
    }

    if (this.nTime == this.nDur)
    {
    clearInterval( this.nID2 );

    if (this.nOldAct > -1)
    document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";

    var p=this;
    this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
    }
    }



    _bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
    {
    return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
    }



    De verdad, espero que les gusta, que les sirva y que les salga. Y posteen qué tal les parece. Cualquier inconveniente, trataremos de solucionarlo. Saludos a toda la gente de cctw.
    Pero a decir verdad, a mi no me funciono ni el tuyo ni el otro. No se porque será XD.

    Espero que te sirvan. Ahí nos vemos.
    VNDO UN TCLADO QU L FALTA UNA VOCAL

  3. #3
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    02 ago, 13
    Mensajes
    1
    Poder de Reputación
    0
    estoy tratando de adaptarlo a mi pagina y me da el error porque parece que la siguiente linea no funciona, o no la estoy colocando bien:
    [img]objetos/imagenuno.jpg[/img]

    al abrir la pagina sale tal cual está escrito, no muestra imagen alguna..

    saludos.!!

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    21
    Hola

    Código HTML:
    <div class="cf_element" id="cf1"><img src="objetos/imagenuno.jpg" alt="Titulo de la foto"></div> 

Temas Similares

  1. Script de imagenes
    Por TheCain en el foro Dreamweaver
    Respuestas: 0
    Último Mensaje: 05/01/2011, 11:33
  2. insertar un script de imagenes??
    Por TheCain en el foro Dreamweaver
    Respuestas: 3
    Último Mensaje: 08/12/2010, 12:22

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •