Foros del Web - Ver Mensaje Individual

IsaBelM · #11 (**permalink**) 14/01/2013, 15:28

Rotador de Imágenes con Fade ----> compatibilidad : todos los navegadores modernos incluido ie8

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotador de Imágenes con Fade</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
}


html, body {
	width: 100%;
	height: 100%;
}


.contenedor {
	width: 62.25%; /* 850px; mismo ancho que las imágenes */
	height: 49%; /* 315px; mismo alto que las imágenes */
	background: #FFF url('https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/ajax-loader.gif') no-repeat center;
	border: 1px solid #000;
	margin: 0 auto;
}


.imgFade {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	filter: alfa(opacity=0);
	z-index: 0;
}


.botonera {
	width: 100%;
	position: absolute;
	bottom: 2%; /*10px;*/
	text-align: center;
	z-index: 9999;
}


.boton {
	width: 15px;
	height: 15px;
	display: inline-block;
	margin: 0 1%;
	background-color: rgba(255, 255, 255, 0);
	color: rgb(235, 235, 235);
	font: bold 11px Verdana;
	cursor: pointer;
	border: 1px solid rgb(44, 44, 44);
	border-radius: 9px;
}
</style>
<script type="text/javascript">
var lib = {

    Evento : function(elemento, nomevento, fnc) {

        if (elemento.addEventListener) {

            elemento.addEventListener(nomevento, fnc, false);

            } else if (elemento.attachEvent) {

            elemento.attachEvent('on' + nomevento, fnc);

        }
    }
}


var rotadorImg = {

	arrImagenes : [
		'http://facebookportadas.com/imagenes/comotellamas.jpg',
		'http://facebookportadas.com/imagenes/inocente.jpg',
		'http://facebookportadas.com/imagenes/minecraft2.jpg',
		'http://facebookportadas.com/imagenes/diloquesientes.jpg'
	],
	imagenes : [],
	nImg : 0,
	intervaloFade : null,
	intervaloRot : null,
	iteracion : 0,


	rotadorImgInit : function() {

		rotadorImg.nImg = rotadorImg.arrImagenes.length;
	
		var fragmento = document.createDocumentFragment();


		var botonera = document.createElement('div');
		botonera.setAttribute('class', 'botonera');

		for (var i = 0; i < rotadorImg.nImg; i++) {

		//precarga de imágenes

			rotadorImg.imagenes[i] = new Image();
			rotadorImg.imagenes[i].src = rotadorImg.arrImagenes[i];

		//precarga de imágenes

			var imagen = rotadorImg.creaImg(i);
			fragmento.appendChild(imagen);

			var boton = rotadorImg.creaPag(i); 
    		botonera.appendChild(boton);
		}

		var botones = fragmento.appendChild(botonera);

		document.querySelector('.contenedor').appendChild(fragmento);

  		rotadorImg.fadeYrotacion(0);
	},




	creaImg : function(indice) {

    	var img = document.createElement('img');
    	img.setAttribute('src', rotadorImg.arrImagenes[indice]);
    	img.setAttribute('class', 'imgFade');

    	return img;
	},



	creaPag : function(indice) {

    	var boton = document.createElement('span');
	    boton.setAttribute('class', 'boton');
	    boton.textContent = (indice + 1); // los números
	    lib.Evento(boton, 'click', function() {rotadorImg.rotadorClick(indice);});

    	return boton;
	},



	fadeYrotacion : function (opac, indice, bol) {

		if (bol) {

			var este = indice % rotadorImg.nImg;
			var estaImg = document.querySelectorAll('.imgFade')[este];

			estaImg.style.opacity = '';
			estaImg.style.filter = 'alpha(opacity = 0)';
			document.querySelectorAll('.boton')[este].style.backgroundColor = 'rgb(255, 0, 0)';
			estaImg.style.zIndex = rotadorImg.iteracion;

		} else {

			clearInterval(rotadorImg.intervaloRot);

			var este = rotadorImg.iteracion % rotadorImg.nImg;
			var estaImg = document.querySelectorAll('.imgFade')[este];

			estaImg.style.opacity = '';
			estaImg.style.filter = 'alpha(opacity = 0)';
			document.querySelectorAll('.boton')[este].style.backgroundColor = 'rgb(255, 0, 0)';
			estaImg.style.zIndex = ++rotadorImg.iteracion;
		}


		rotadorImg.intervaloFade = setInterval(function() {

			if (opac <= 100) { 

				rotadorImg.fadeIn(estaImg, opac);
				opac += 2.5;

			} else {

				clearInterval(rotadorImg.intervaloFade);

				rotadorImg.intervaloRot = setInterval(function() {

					rotadorImg.rotador(estaImg);

				}, 2000);
			}

		}, 60);

	},





	fadeIn : function(estaImg, opac) {

		estaImg.style.opacity = opac/100;
	    estaImg.style.filter = 'alpha(opacity =' + opac + ')';
	},





	rotador : function(estaImg) {

		document.querySelectorAll('.boton')[(rotadorImg.iteracion - 1) % rotadorImg.nImg].style.backgroundColor = '';

		estaImg.style.zIndex = rotadorImg.iteracion;

		rotadorImg.fadeYrotacion(0);
	},




	rotadorClick : function(indice) {

		var este = (rotadorImg.iteracion - 1) % rotadorImg.nImg;

		document.querySelectorAll('.boton')[este].style.backgroundColor = '';

		if (indice < este) {

			rotadorImg.iteracion += ((indice + rotadorImg.nImg) - este);

		} else {

			rotadorImg.iteracion += Math.abs(este - indice);
		}
		

		clearInterval(rotadorImg.intervaloFade);
		clearInterval(rotadorImg.intervaloRot);

		document.querySelectorAll('.imgFade')[indice].style.zIndex = rotadorImg.iteracion;

		rotadorImg.fadeYrotacion(0, indice, true);
	}

};


lib.Evento(window, 'load', rotadorImg.rotadorImgInit);
</script>
</head>
<body>

<div class="contenedor"></div>

</body>
</html>