Foros del Web - Ver Mensaje Individual

IsaBelM · #3 (**permalink**) 11/01/2013, 14:56

slider con tabs ----> 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{
border: 1px solid #000;
width: 400px;
height: 250px;
background: #000;
margin: 0 auto;
overflow: hidden;
}


div#contenedor span.tab{
text-align: center;
display: inline-block;
width: 95px;
background-color: rgb(250, 6, 6);
color: #FFF;
border: 1px solid rgb(184, 184, 13);
cursor: pointer;
}


div#contenedor div.slider{
width: 200%; /* este width es sobrescrito en el onload. de inicio se le asigna 200% que equivale a 2 imágenes */
position: relative;
left: 0;
top: 0;
}


div#contenedor div.slider img {
width: 400px; /* mismo width de #contenedor */
height: 228px;
float: left;
}
</style>
<script type="text/javascript">
var namespaceSlider = {

Evento : function(elemento, nomevento, fnc) {

	if (elemento.addEventListener) {
		elemento.addEventListener(nomevento, fnc, false);
    	} else if (elemento.attachEvent) {
		elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento); });
  	}
}



estableceValoryEventos: window.onload = function() {
var selectorSlider = document.querySelector('div.slider');
var n_Imagenes = selectorSlider.getElementsByTagName('img').length;
selectorSlider.style.width = parseInt(n_Imagenes * 100, 10) + '%';

var spans = document.querySelectorAll('span.tab');
for (var j = 0; j < spans.length; j++) {
namespaceSlider.Evento(spans[j], 'click', function() {namespaceSlider.mover(this.id.split('_')[1])});
}

},



posInicial: 0,
anchoImg: 100,

mover : function(tab){

var posFinal = namespaceSlider.anchoImg * parseInt(tab, 10);
var slider = document.querySelector('div.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">
<span class="tab" id="s_0">IMG1</span>
<span class="tab" id="s_1">IMG2</span>
<span class="tab" id="s_2">IMG3</span>
<span class="tab" id="s_3">IMG4</span>

<div class="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>

</body>
</html>