Foros del Web - Ver Mensaje Individual

IsaBelM · #1 (**permalink**) 11/01/2013, 14:49

cansada de ver como se mal usa este framework para crear pequeños efectos, me he decido a abrir este post en el que iré aportando efectos

slider de imágenes ----> compatibilidad : todos los navegadores modernos incluido ie8

Código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
* {
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
}

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


#slider_contenedor {
	border: 1px solid #000;
	width: 25rem;  /*ancho de la imagen */
	height: 9.25rem;  /*alto de la imagen */
	background: #000;
	margin: 0 auto;
	overflow: hidden;
}



#slider_contenedor ul {
	list-style-type: none;
	white-space: nowrap;
}


#slider_contenedor li {
	display: inline-block;
}


#slider_contenedor img {
	width: 100%;
	height: auto;
}


#slider_contenedor > span {
    width: auto;
    height: 1.5rem;
    position: absolute;
    top: 44%;
    z-index: 99;
    cursor: pointer;
}


#slider_contenedor > span.der{
    right: 1%;
}

#slider_contenedor > span.der:after{
    content: "\25B6 \25B6";
}


#slider_contenedor > span.izq{
    left: 1%;
}


#slider_contenedor > span.izq:after{
    content: "\25C0 \25C0";
}
</style>
<script>
var imageSlider = {

	posiciones : [0],
    clicks: 0,
    indiceAnterior : 0,
    posInicial: 0,


	estableceValoryEventos: function() {


		this.UL = document.querySelector('#slider_contenedor ul');
		var ILS = document.querySelectorAll('#slider_contenedor li'),
		    totalILS = ILS.length,
		    porcentajeAvance = 0;

		for (var i = 1; i < totalILS; i++) {

			porcentajeAvance = (100 * i);
	        this.posiciones.push(porcentajeAvance);
    	}

		var spans = document.querySelectorAll('#slider_contenedor span');
		spans[0].addEventListener('click', function() {imageSlider.mover(0)}, false);
		spans[1].addEventListener('click', function() {imageSlider.mover(1)}, false);
	},


	mover : function(bol){

		this.clicks += (bol == 0) ? this.posiciones.length - 1 : bol;
        var indiceActual = this.clicks % this.posiciones.length;
        var posicionFinal = this.posiciones[indiceActual]

		if (this.indiceAnterior <= indiceActual) { // scrolea hacia la izquierda

            (function desplazar() {

                if (imageSlider.posInicial >= posicionFinal) return;

                setTimeout(function() {

                    imageSlider.posInicial += 1;
                    imageSlider.UL.style.left = -imageSlider.posInicial + '%';
                    desplazar();

                }, 1);

            })();

            this.indiceAnterior = indiceActual;

        } else {


            (function desplazar() {

                if (imageSlider.posInicial <= posicionFinal) return;

                setTimeout(function() {

                    imageSlider.posInicial -= 1;
                    imageSlider.UL.style.left = -imageSlider.posInicial + '%';
                    desplazar();

                }, 1);

            })();

            this.indiceAnterior = indiceActual;
        }
	}
}

window.addEventListener('load', function() {imageSlider.estableceValoryEventos()}, false);
</script>
</head>
<body>

	<div id="slider_contenedor">
		<span class="izq"></span>
		<span class="der"></span>
		<ul>
			<li><img src="http://facebookportadas.com/imagenes/comotellamas.jpg" alt="i0">
			<li><img src="http://facebookportadas.com/imagenes/inocente.jpg" alt="i1">
			<li><img src="http://facebookportadas.com/imagenes/minecraft2.jpg" alt="i2">
			<li><img src="http://facebookportadas.com/imagenes/diloquesientes.jpg" alt="i3">
		</ul>
	</div>
		
</body>
</html>