script transición de imagenes

*Pau,, · 24 Jul 2010, 16:13 · Solicitar retirada

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 :wink:

<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!

David · 25 Ago 2010, 14:13 · Solicitar retirada

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í:

[contenido no disponible]

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">[contenido no disponible]</div>
<div class="cf_element" id="cf2">[contenido no disponible]</div>
<div class="cf_element" id="cf3">[contenido no disponible]</div>
<div class="cf_element" id="cf4">[contenido no disponible]</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).style.opacity = 0;
document.getElementById(divs).style.position = "absolute";
document.getElementById(divs).style.filter = "alpha(opacity=0)";
document.getElementById(divs).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.

cmorales72 · 2 Ago 2013, 16:50 · Solicitar retirada

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:
[contenido no disponible]

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

saludos.!!

francisco1 · 2 Ago 2013, 20:29 · Solicitar retirada

Hola

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