PASA IMAGEN REPARTIDO BRUSCO
Tenemos un pasaimagen dividido en 4 (o los que se desee) partes, 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"
El script básicamente carga en el array imagen todas las imagenes incluida la transparente. orden lleva la carga inicial (1,2,3,4, y cada push el orden en el intervalo siguiente, siendo libre la cantidad de reacomodamientos.
Éstos los realiza cambiar() en forma inmediata. El if se asegura de loopear indice, cuando éste llega al largo de orden se resetea a 0 y la serie se repite.
Set interval controla que se repita indefinidamente cambiar y 2000 en este caso son los milisegundos de lag. La función precarga() genera una etiqueta <img /> y le va poniendo los src cargados en imagen.
El script básicamente carga en el array imagen todas las imagenes incluida la transparente. orden lleva la carga inicial (1,2,3,4, y cada push el orden en el intervalo siguiente, siendo libre la cantidad de reacomodamientos.
Éstos los realiza cambiar() en forma inmediata. El if se asegura de loopear indice, cuando éste llega al largo de orden se resetea a 0 y la serie se repite.
Set interval controla que se repita indefinidamente cambiar y 2000 en este caso son los milisegundos de lag. La función precarga() genera una etiqueta <img /> y le va poniendo los src cargados en imagen.
<head>
<script>
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 orden = [1,2,3,4];
orden.push(5,2,7,4);
orden.push(5,6,7,8);
orden.push(5,10,11,8);
orden.push(9,10,11,12);
orden.push(13,10,11,16);
orden.push(13,14,11,16);
orden.push(13,14,15,16);
orden.push(13,18,19,16);
orden.push(17,18,19,20);
orden.push(5,18,19,20);
orden.push(5,6,19,4);
var indice=0;
function cambiar(){
$("#i1").attr("src","img-pasadiapo/" + imagen[orden[indice]]);
indice+=1;
$("#i2").attr("src","img-pasadiapo/" + imagen[orden[indice]]);
indice+=1;
$("#i3").attr("src","img-pasadiapo/" + imagen[orden[indice]]);
indice+=1;
$("#i4").attr("src","img-pasadiapo/" + imagen[orden[indice]]);
indice+=1;
if (indice>=orden.length){ // si indice excede orden.lenghth() lo reseteo
indice=0;
};
}
function precarga() {
for (var i = 0; i < imagen.length; i++) {
$("<img />").attr("src", "img-pasadiapo/" + imagen[i]);
}
}
$(document).ready(function(){
precarga();
setInterval('cambiar()', 2000);
});
</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"><img id="i1" src="img-pasadiapo/blanco.gif" ></div>
<div class="flotante"><img id="i2" src="img-pasadiapo/blanco.gif" ></div>
<div class="flotante"><img id="i3" src="img-pasadiapo/blanco.gif" ></div>
<div class="flotante"><img id="i4" src="img-pasadiapo/blanco.gif" ></div>
</div><!-- fin tira de fotos -->
</div><!-- fin contenedor color fondo -->
</body>