¿Quien algún día pensó poner un slider para presentar fotos el el blog? Hoy les voy a contar como poner uno de forma sencilla que funciona por si solo sin necesidad de ninguna librería con las mismas prestaciones que el mas avanzado de los que hay por ahí, se inicia automáticamente al cargar la pagina con el tiempo predeterminado que le hayamos puesto (tiempo = parseInt(1000.0 * 4);), (4 segundos) dispone de herramientas para que el visitante pueda acceder al temporizador y cambiarle el tiempo en seis campos más, es posible parar el temporizador y pasar manualmente tanto hacia adelante o hacia atrás y volver al modo automático, soporta un enlace en cada foto y el titulo, todas las herramientas están ocultas, solo aparecen cuando se necesiten, podéis verlo y probarlo.
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var temporizador = null;
var contador = null;
var tiempo = null;
function marcha() {
document.images.slider.src = fotos[0];
cambio(-1);
fotos.push(0);
tiempo = parseInt(1000.0 * 4);
if (isNaN(tiempo) || tiempo <= 0);
else temporizador = setTimeout("avanzar()", tiempo);
}
function adelante() {
avanzar();
}
function atras() {
retroceder();
}
function automatico(s) {
clearTimeout(temporizador);
tiempo = parseInt(s);
if (isNaN(tiempo) || tiempo <= 0)
alert('Hay que poner el "Tiempo"');
else temporizador = setTimeout("avanzar()", tiempo)
}
function cambio(avance) {
clearTimeout(temporizador);
contador += avance;
if (contador == fotos.length) contador = fotos.length - 1;
else
if (contador < 0) contador = 0;
document.images.slider.src = fotos[contador];
window.status = contador + 1 + " / " + tex.length;
}
function retroceder() {
clearTimeout(temporizador);
cambio(-1)
if (contador < fotos.length - 1) temporizador = setTimeout("retroceder()", tiempo)
}
function avanzar() {
clearTimeout(temporizador);
cambio(1)
if (contador < fotos.length - 1) temporizador = setTimeout("avanzar()", tiempo)
else reinicio()
}
function reinicio() {
contador = 0;
cambio(-1);
setTimeout("avanzar()", tiempo)
document.images.slider.src = fotos[0];
}
function enlazar() {
var nuevaVentana = window.event;
nuevaVentana = window.open(enlaces[contador])
}
function titulos() {
var texto = "<big><font color='ffffff' face='Arial' style='font-size:17px;opacity:1'>" + window.status + '<br>' + tex[+contador] + "</font></big>"
if (document.all)
document.all.informacion.innerHTML = texto
else if (document.getElementById)
document.getElementById("informacion").innerHTML = texto
else
document.write(texto)
}
if (!document.all && !document.getElementById)
titulos()
if (document.all || document.getElementById)
setInterval("titulos()", 50)
</script>
<script type="text/javascript" >
var fotos = new Array(
"https://foto1.jpg",
"https://foto2.jpg",
"https://foto3.jpg",
"https://foto4.jpg"
);
var enlaces = new Array(
"enlace a foto1",
"enlace a foto2",
"enlace a foto3",
"enlace a foto4"
);
var tex = new Array(
"titulo de foto1",
"titulo de foto2",
"titulo de foto3",
"titulo de foto4"
);
Ahora vamos a la instalación, pues es bastante sencilla, si lo ponemos en una entrada simplemente hay que sustituir las URLs correspondientes en el campo amarillo del script, (no tiene limite) podéis agregar las que queráis siguiendo el protocolo del ejemplo, observar que las URLs van entrecomilladas y con una coma al final, aquí es donde es posible cometer errores, la última de cada lista no lleva la coma, si a cualquiera de ellas se le pone ya no funciona, con el editor siempre en el modo HTML copiamos los tres bloques (script, CSS y HTML) y los pegamos en la entrada o pagina en el mismo orden y listo.
Como opción mas recomendada seria poner la parte azul del script en la plantilla justo por debajo de la etiqueta <body> ya nos valdría para todos los del blog, y en las entradas con poner el HTML y las listas (el campo amarillo) seria suficiente, el CSS se añade en el campo propio de el (sin las etiquetas <style> </style>) y listo.
#slider-wrapper {
overflow:hidden;
position: relative;
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 0 10px;
font-family: arial, sans-serif;
font-size: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#slider {
background:#d0e0e3;
position: relative;
width: 100%;
padding-bottom: 67%;
overflow: hidden;
border:1px solid #333;
border-radius: 1%/1.5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#slider > a {
position:absolute;
top:0;
left:0;
width: 100%;
max-height: 100%;
}
#slider img {
text-align: center;
max-width: 100% ;
max-height: 100%;
position: initial;
margin:0;
padding:0;
border:0;
}
a.mas, a.menos {
position: absolute;
top: 45%;
left: 0px;
z-index: 10;
text-decoration: none;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
a.mas {
margin-left: -60px;
opacity: 0;
left: 100%;
}
#slider-wrapper:hover a.mas {
opacity: 1;
}
a.menos {
left: 0;
margin-left: 10px;
opacity: 0;
}
#slider-wrapper:hover a.menos {
opacity: 1;
}
a.fren, a.retr{
position: absolute;
bottom:0;
z-index: 100;
width: 40px;
height: 40px;
opacity: 0;
line-height: 30px;
font-size: 50px;
color: #ffffff;
text-decoration: none;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
a.fren {
left: 93%;
left: 100%;
margin-left: -50px;
}
#slider-wrapper:hover a.fren {
opacity: 1
}
a.retr {
left: 0%;
margin-left: 10px;
}
#slider-wrapper:hover a.retr {
opacity: 1
}
.informacion {
position: absolute;
font-size: large;
border-radius: 0px 0px 5px 5px;
opacity: 0;
bottom:0;
width: 97%;
height: 2.4em;
z-index: 99;
background: #000000;
-webkit-transition: all 1500ms ease;
-moz-transition: all 1500ms ease;
-ms-transition: all 1500ms ease;
-o-transition: all 1500ms ease;
transition: all 1500ms ease;
}
#slider-wrapper:hover .informacion {
opacity: 0.7;
}
#informacion {
position: absolute;
text-align: center;
line-height: 15px;
text-shadow: 0 2px 2px black, 0 2px 6px white;
bottom:.2em;
width: 100%;
background: transparent;
z-index: 98;
opacity: 1;
}
.opciones {
position: absolute;
text-align: center;
top: 0;
margin-top:-30px;
width: 100%;
z-index: 100;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
#slider-wrapper:hover .opciones {
margin-top: 0;
}
</style>
El bloque HTML no tiene gran cosa, el evento onload es el que se encarga de poner en marcha el slider al cargar la pagina, los divs "informacion" nos muestran el contador y los títulos, dos imágenes en forma de triángulos llaman a la función del script de avanzar y retroceder respectivamente parando la temporización, dos enlaces mas para reanudar la marcha tanto adelante como atrás (adelante infinito y atrás hasta fin del ciclo) y por último el desplegable Tiempo para elegir el preferido y en OK validar, por si queréis enredar un poco con los códigos lo podéis hacer aqui es el mismo con direcciones (URLs) reales y no tengáis miedo estropearlo solo es a nivel de navegador.
<body onload="marcha(fotos)">
<a href="javascript:cambio(1);" class="mas" title="Avanzar una"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNlRCyJqHtDRMLnEYXmKNtIvtJpnPwzzWmaAEoNOKxYM0Noi_-yy-NHJHbfGZW0vpMTxSi-oDEJkNoIvWJDwqJwXUfCHQy_lPeENPJRHsiiutFo5odH89bQVVK06jH-QrgtSZnAr_DC6qA6pLIzAq0K5HT515T5_w8p-uPmKCGGvyfSOylhkiCPBPQ2g/s41/play.png" width="60" height="60"></a>
<a href="javascript:cambio(-1);" class="menos" title="Retroceder una"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1SjI82qphpkb-bFtN1F6FU2hbjx23zeydDWizo_ziFY_BafglKZjQaqW8oV1UMUT8vLoeocbEV4w1rRPB6dWI22-I5DqllUAiz1t-vEgrlKTbhcL1ujAAiU2g1OyOfaUNCZEUae8ziBWLxGgRwrqGzWcYcYG9gchfYxLDOr_hgElX6ByXmhU9KkoynQ/s41/Atras.png" width="60" height="60"></a>
<a href="javascript:retroceder()" class="retr" title="Marcha Atras"><b>«</b></a>
<a href="javascript:avanzar()" class="fren" title="Marcha Adelante"><b>»</b></a>
<div id="slider">
<a href="javascript:enlazar()">
<img id="slider" title="Ir a la pagina" src="https://direcion de la primera imagen.jpg"></a>
<div class="opciones">
<form accept-charset='utf-8' name="form" method="post" action="javascript:automatico(this.form.tiempo.value)">
<select title="Poner el tiempo" style="color: #003333;background-color: #ffffff;font-size:17px;border:3px solid #a2a1a1;" name="tiempo">
<option value="4000">Tiempo</option>
<option value="2000"> 2 Seg.</option>
<option value="3000"> 3 Seg.</option>
<option value="5000"> 5 Seg.</option>
<option value="7000"> 7 Seg.</option>
<option value="10000"> 10 Seg.</option>
<option value="15000"> 15 Seg.</option>
</select>
<input style="color: #003333;background-color: #ffffff;font-size:17px;" title="Validar" type="submit" name="Button" value="OK">
</form>
</div>
<div class="informacion"><div id="informacion"></div></div>
</div>
</div>
Lo que esta en negrita seria la URL de la primera imagen, no es necesario se puede sustituir por "#" como veáis.
Comentarios
Publicar un comentario