PASA IMAGEN REPARTIDO FADE
Tenemos un pasaimagen dividido en 4 (o los que se desee) parte, que se cargan
en las 4 imagenes con id i1 a i4, en principio un gif transparente del
tamaño de las fotos a cargar, pero puede ser un "esperando"
Pero a diferencia del pasador anterior las img estan envueltas en una div con id de f1 a f4 (donde cargaremos el fondo).
El script básicamente carga en el array imagen todas las imágenes incluida la transparente.
orden1, orden2,...ordenN llevan la carga en orden de la imagen N, siendo libre la cantidad de reacomodamientos, pero estos deben ser del mismo número de elementos.
Al arrancar la función ready, primero se ejecuta precarga() que genera una etiqueta <img /> y le va poniendo los src cargados en imagen, con esto quedan precargadas las imágenes del pasaimagen.
Luego se cargan en el background-image de las fN el primer set. Después pasamos en intervalo de milisegundos a cambiar().
La función Cambiar(): el if primero setea un indice temporario en 1 menos que índice. El if se asegura de loopear índice, cuando éste llega al largo de orden se resetea a 0 y la serie se repite.
Luego desaparecemos cada imagen, le cambiamos el src según orden, le aplicamos un fadein y finalmente la copiamos al background (como el indice aumentó usamos temp).
Pero a diferencia del pasador anterior las img estan envueltas en una div con id de f1 a f4 (donde cargaremos el fondo).
El script básicamente carga en el array imagen todas las imágenes incluida la transparente.
orden1, orden2,...ordenN llevan la carga en orden de la imagen N, siendo libre la cantidad de reacomodamientos, pero estos deben ser del mismo número de elementos.
Al arrancar la función ready, primero se ejecuta precarga() que genera una etiqueta <img /> y le va poniendo los src cargados en imagen, con esto quedan precargadas las imágenes del pasaimagen.
Luego se cargan en el background-image de las fN el primer set. Después pasamos en intervalo de milisegundos a cambiar().
La función Cambiar(): el if primero setea un indice temporario en 1 menos que índice. El if se asegura de loopear índice, cuando éste llega al largo de orden se resetea a 0 y la serie se repite.
Luego desaparecemos cada imagen, le cambiamos el src según orden, le aplicamos un fadein y finalmente la copiamos al background (como el indice aumentó usamos temp).
<head>
<script>
// parametros-----------------------------------
var imagen = ["blanco.gif","1a.jpg","1b.jpg","1c.jpg","1d.jpg","2a.jpg","2b.jpg","2c.jpg","2d.jpg","3a.jpg","3b.jpg","3c.jpg","3d.jpg","4a.jpg","4b.jpg","4c.jpg","4d.jpg","5a.jpg","5b.jpg","5c.jpg","5d.jpg"];
var orden1 = [ 1, 1, 6, 9,13,13,13,17,17, 1]; //orden 1º imagen
var orden2 = [ 2, 7, 7,10,10,14,14,14,18, 2]; //orden 2º imagen
var orden3 = [ 3, 5,11,11,11,11,15,19,19,19]; //orden 3º imagen
var orden4 = [ 4, 8,12,12,16,16,16,20,20,20]; //orden 4º imagen
var intervalo=4000; //milisegundos de refresco
var fraccion= 4; //fraccion del refresco del fade
// fin parametros-----------------------------------
var indice=1;
var temp=0;
var fade=intervalo/fraccion;
function cambiar(){
if (indice==0){
temp=orden1.length-1;
}else{
temp=indice-1;
};
//-------------------------------------------bloque 1
$("#i1").css("display","none");
$("#i1").attr("src","img-pasadiapo/" + imagen[orden1[indice]]);
$("#i1").fadeIn(fade);
$("#f1").css("background-image","url(img-pasadiapo/"+ imagen[orden1[temp]] +")");
//-------------------------------------------bloque 2
$("#i2").css("display","none");
$("#i2").attr("src","img-pasadiapo/" + imagen[orden2[indice]]);
$("#i2").fadeIn(fade);
$("#f2").css("background-image","url(img-pasadiapo/"+ imagen[orden2[temp]] +")");
//-------------------------------------------bloque 3
$("#i3").css("display","none");
$("#i3").attr("src","img-pasadiapo/" + imagen[orden3[indice]]);
$("#i3").fadeIn(fade);
$("#f3").css("background-image","url(img-pasadiapo/"+ imagen[orden3[temp]] +")");
//-------------------------------------------bloque 4
$("#i4").css("display","none");
$("#i4").attr("src","img-pasadiapo/" + imagen[orden4[indice]]);
$("#i4").fadeIn(fade);
$("#f4").css("background-image","url(img-pasadiapo/"+ imagen[orden4[temp]] +")");
//---------------------------------------------
indice+=1;
if (indice>=orden1.length){
indice=0;
};
setTimeout(cambiar, intervalo);
}
function precarga() {
for (var i = 0; i < imagen.length; i++) {
$("<img />").attr("src", "img-pasadiapo/" + imagen[i]);
}
}
$(document).ready(function(){
$("#f1").css("display","none");
$("#f1").css("background-image","url(img-pasadiapo/"+ imagen[orden1[0]] +")");
$("#f1").fadeIn(fade);
$("#f2").css("display","none");
$("#f2").css("background-image","url(img-pasadiapo/"+ imagen[orden2[0]] +")");
$("#f2").fadeIn(fraccion*fade);
$("#f3").css("display","none");
$("#f3").css("background-image","url(img-pasadiapo/"+ imagen[orden3[0]] +")");
$("#f3").fadeIn(fade);
$("#f4").css("display","none");
$("#f4").css("background-image","url(img-pasadiapo/"+ imagen[orden4[0]] +")");
$("#f4").fadeIn(fraccion*fade);
setTimeout(cambiar, intervalo);
});
</script>
<style>
.fondo{
background-color:#000;
width:1000px;
height:400px;
padding-top:20px;
padding-left:20px;
margin-top:30px;
}
.flotante{
float:left;
border-left:#000 solid 1px;
}
.flotante img{
width: 240px;
height: 312px;
border: none;
}
</style>
</head>
<body>
<div class="fondo"> <!--contenedor para color fondo -->
<div id="tira"><!-- inicio tira de fotos -->
<div class="flotante">
<div id="f1"><img id="i1" src="img-pasadiapo/blanco.gif"></div>
</div>
<div class="flotante">
<div id="f2"><img id="i2" src="img-pasadiapo/blanco.gif"></div>
</div>
<div class="flotante">
<div id="f3"><img id="i3" src="img-pasadiapo/blanco.gif"></div>
</div>
<div class="flotante">
<div id="f4"><img id="i4" src="img-pasadiapo/blanco.gif"></div>
</div>
</div><!-- fin tira de fotos -->
</div><!-- fin contenedor color fondo -->
</body>