PASA IMAGEN CON UNA IMAGEN FADE
Las imagenes van en el array imagen y el orden en
orden1. La función Cambiar() es quien pasa
las imágenes, el if del principio hace que temp esté un entero antes que índice,
excepto si índice es cero entoces va al extremo del array.
Bloque hace el trabajo pesado, primero esconde la imagen #i1, luego asigna
a src índice y a background indice-1 (que est&á en temp).
Luego avanza índice en 1 excepto que llegue al final del array en ese caso reinicializa a cero. Luego se llama a sí mismo. Es un loop infinito. Al cargar la página (document.ready) cargamos la primer imagen y disparamos cambiar(). LISTO.
Si agregamos las funciones de mouse agregamos parar y arrancar.
La div #f1debe tener el tamaño exacto de las imagenes, y blanco1.gif también.
Luego avanza índice en 1 excepto que llegue al final del array en ese caso reinicializa a cero. Luego se llama a sí mismo. Es un loop infinito. Al cargar la página (document.ready) cargamos la primer imagen y disparamos cambiar(). LISTO.
Si agregamos las funciones de mouse agregamos parar y arrancar.
La div #f1debe tener el tamaño exacto de las imagenes, y blanco1.gif también.
<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;
<script>
// parametros-----------------------------------
var imagen = ["diapo01.jpg","diapo02.jpg","diapo03.jpg","diapo04.jpg"];
var orden1 = [ 0, 1, 2, 3]; //orden imagenes
var intervalo=4000; //milisegundos de refresco
var fraccion= 4; //fraccion del refresco del fade
// fin parametros
var indice=1;
var temp=0;
var disparo; //la declaro aca para que sea global y el clearTimeOut afecte tb al de dentro de cambiar()
var fade=intervalo/fraccion;
function cambiar(){
if (indice==0){
temp=orden1.length-1;
}else{
temp=indice-1;
};
//-------------------------------------------bloque
$("#numeros").html("Indice= " + indice + " temp=" + temp); // solo en escenario de prueba
$("#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]] +")");
//------------------------------------------- fin bloque
indice+=1;
if (indice>=orden1.length){
indice=0;
};
disparo = setTimeout(cambiar, intervalo);
}
$(document).ready(function(){
$("#f1").css("display","none");
$("#f1").css("background-image","url(img-pasadiapo/"+ imagen[orden1[0]] +")");
$("#f1").fadeIn(fade);
disparo = setTimeout(cambiar, intervalo);
// para detener -arrancar con mouse
$("#f1").mouseover(function(evento){
clearTimeout(disparo); //detiene el pasadiapo
});
$("#f1").mouseout(function(evento){
disparo = setTimeout(cambiar, 100); // tiempo 100 miliseg para que arranque de inmediato
});
// FIN para detener -arrancar con mouse
});
</script>
<style>
#f1{
width:500px;
cursor:pointer;
}
.contenedor{
margin: 0 auto;
margin-left:20px;
margin-top:50px;
text-align:center;
}
</style>
</head>
<body>
<!-- inicio pasador fotos -->
<div id="f1">
<img id="i1" src="img-pasadiapo/blanco1.gif">
</div>
<!-- FIN pasador fotos -->
</body>