13/04/2013, 12:22
|
| | | Fecha de Ingreso: abril-2013
Mensajes: 5
Antigüedad: 11 años Puntos: 0 | |
| Respuesta: [APORTE] efectos sin jquery
Cita:
Iniciado por IsaBelM  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 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%;
}
div#contenedor_principal {
width: 453px;
height: 250px;
margin: 0 auto;
}
div#contenedor_principal > div#contenedor_slider{
border: 1px solid #000;
width: 400px;
height: 250px;
background: #000;
margin: 0 auto;
overflow: hidden;
}
div#contenedor_principal > span.flecha{
z-index: 99;
width: 60px;
height: 61px;
top: 100px;
position: absolute;
cursor: pointer;
}
div#contenedor_principal > span.der{
right: -9px;
background-image: url('http://img197.imageshack.us/img197/6796/flechasy.png');
background-repeat: no-repeat;
background-position: -60px 0;
}
div#contenedor_principal > span.izq{
left: -9px;
background-image: url('http://img197.imageshack.us/img197/6796/flechasy.png');
background-repeat: no-repeat;
background-position: 0 0;
}
div#contenedor_principal > div#contenedor_slider div#slider{
width: 200%; /* este width es sobrescrito en el onload. es equivalente a 2 imágenes */
position: relative;
left: 0;
top: 0;
}
div#contenedor_principal > div#contenedor_slider div#slider img {
width: 400px; /* mismo width de #contenedor_slider */
height: 250px; /* mismo height de #contenedor_slider */
float: left;
}
</style>
<script type="text/javascript">
var namespaceSlider = {
Evento : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, function(e) { fnc.call(elemento, e); }, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento); });
}
},
estableceValoryEventos: window.onload = function() {
var selectorSlider = document.getElementById('slider');
var n_Imagenes = selectorSlider.getElementsByTagName('img').length;
selectorSlider.style.width = parseInt(n_Imagenes * 100, 10) + '%';
var spans = document.querySelectorAll('span.flecha');
namespaceSlider.Evento(spans[0], 'click', function() {namespaceSlider.mover(n_Imagenes, 0)});
namespaceSlider.Evento(spans[1], 'click', function() {namespaceSlider.mover(n_Imagenes, 1)});
},
clicks: 0,
posInicial: 0,
anchoImg: 100,
mover : function(nImg, i){
namespaceSlider.clicks += (i == 0) ? parseInt(nImg-1, 10) : parseInt(i, 10);
var indiceImg = namespaceSlider.clicks % nImg;
var posFinal = namespaceSlider.anchoImg * parseInt(indiceImg, 10);
var slider = document.getElementById('slider');
if (namespaceSlider.posInicial >= posFinal) { // escrolea hacia la izquierda
(function desplazar() {
setTimeout(function(){
if(namespaceSlider.posInicial <= posFinal) return;
namespaceSlider.posInicial -= 2;
slider.style.left = -namespaceSlider.posInicial + '%';
desplazar();
},6);
})();
} else { // escrolea hacia la derecha
(function desplazar() {
setTimeout(function(){
if(namespaceSlider.posInicial >= posFinal) return;
namespaceSlider.posInicial += 2;
slider.style.left = -namespaceSlider.posInicial + '%';
desplazar();
},6);
})();
}
}
}
</script>
</head>
<body>
<div id="contenedor_principal">
<span class="flecha izq"></span>
<span class="flecha der"></span>
<div id="contenedor_slider">
<div id="slider">
<img src="http://facebookportadas.com/imagenes/comotellamas.jpg" alt="i0" />
<img src="http://facebookportadas.com/imagenes/inocente.jpg" alt="i1" />
<img src="http://facebookportadas.com/imagenes/minecraft2.jpg" alt="i2" />
<img src="http://facebookportadas.com/imagenes/diloquesientes.jpg" alt="i3" />
</div>
</div>
</div>
</body>
</html>
Hola buenas y si a este codigo le quiero meter tiempo para que las imagenes cambien soloas tambien, como lo hago?
Muchas gracias |