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>
Este tema le ha gustado a 11 personas