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:
/**
* author: Timothy Groves - [url]http://www.brandspankingnew.net[/url]
* 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.
