Foros del Web - Ver Mensaje Individual

IsaBelM · #2 (**permalink**) 11/01/2013, 14:53

slider automático ----> 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></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

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

a {outline: 0;}


.cont{
width: auto;
height: auto;
}


.cont > div {
display: inline-block;
vertical-align: top;
}



div#contenedor{
width: 400px;
height: 250px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #CCC;
}



div#contenedor div.slider{
width: 200%; /* equivale al ancho de 2 imágenes. no tocar */
position: relative;
left: 0;
top: 0;
}


div#contenedor div.slider img {
width: 400px; /* mismo width de #contenedor */
height: 250px; /* mismo height de #contenedor */
float: left;
}
</style>
<script type="text/javascript">
function Evento(elemento, nomevento, fnc) {

  	if (elemento.addEventListener) {

		elemento.addEventListener(nomevento, fnc, false);

    	} else if (elemento.attachEvent) {

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

  	}
}



var imgslide = [ 
new imagenes('http://facebookportadas.com/imagenes/comotellamas.jpg'),
new imagenes('http://facebookportadas.com/imagenes/inocente.jpg'),
new imagenes('http://facebookportadas.com/imagenes/minecraft2.jpg'),
new imagenes('http://facebookportadas.com/imagenes/diloquesientes.jpg')
];



function imagenes(img, txt) {
	this.imagen = img;
}



var preImg = [];

for(var i = 0; i < imgslide.length; i++) {

	preImg[i] = new Image();
	preImg[i].src = imgslide[i].imagen;
}


function mover(posInicial, posFinal, slider, indiceImg){

	if (posInicial <= posFinal) {

		var siguienteImg = document.createElement('img');
		siguienteImg.setAttribute('src', preImg[indiceImg].src);
		slider.appendChild(siguienteImg);

		(function desplazar() { 

			setTimeout(function(){

				if (posInicial >= posFinal) {

					slider.removeChild(slider.getElementsByTagName('img')[0]);
					slider.style.left = 0;
					return;
				}

				posInicial += 2;
				slider.style.left = -posInicial + '%';
				desplazar();

			},6);

		})();
	}


	setTimeout(function() {

		var nuevoIndice = parseInt(indiceImg+1) % imgslide.length;

		mover(0, posFinal, slider, nuevoIndice);

	},3000);
}


function inicia() {

	setTimeout(function() {

		var slider = document.querySelector('div.slider');

		mover(0, 100, slider, 1);

	}, 3000);
}


Evento(window, 'load', inicia);
</script>
</head>
<body>

<div id="contenedor">

<div class="slider">
	<img src="http://facebookportadas.com/imagenes/comotellamas.jpg" alt="i0" />
</div>

</div>

</body>
</html>