Home / código / tutoriales / Crear un sencillo slider de imágenes

Crear un sencillo slider de imágenes

Ya hemos visto un tutorial de cómo crear un slider de imágenes o noticias con jQuery, en el cuál teníamos que copiar códigos y librerías que si bien son necesarios, no era lo que algunos buscaban.

En esta ocasión les voy a enseñar a crear un sencillos slider de imágenes en JavaScript, y digo que es fácil porque no pasa de 20 líneas el código para hacerlo funcionar, eso si, lo único que tendremos son imágenes pasar una con otra, pero creo que es suficiente para quienes buscan algo realmente simple.

Entonces, en este slider lo que vamos a crear es tener una serie de imágenes que cambian una con otra y que tengan un link para que el usuario pueda a ir a otra página.

El algoritmo, o procedimiento que vamos a usar es el siguiente:

  1. Declarar variables de control y de capa, así como los arreglos que contienen las direcciones de las imágenes y los links.
  2. Usar un setTimeout() para poder controlar a través de la variable de control el número del elemento del arreglo que se va a elegir
  3. Una vez que se recorra todo el arreglo la variable de control tendrá un valor inicial.

Entonces empecemos.

Estructura HTML

Lo que tenemos es una simple declaración de capa con un id.

<div id="contenedor">

</div>




view raw gistfile1.txt This Gist brought to you by GitHub.




JAVASCRIPT



Ahora si, empecemos declarando nuestras variables, en este caso tenemos 4 variables. La primera es el contador que empieza en –1 porque al iniciar la función se incrementa y ya queda en 0 para poder cargar imágenes, y así funcione en los condicionales. La segunda variable determina el objeto de la capa que se llama ‘contenedor’, para poder usarla más adelante. Por último hay dos arreglos, uno para las direcciones de las imágenes, y otro con los links, hay que notar que la cantidad deben ser las mismas, es decir, si hay 3 imágenes deben haber 3 links también. IMPORTANTE: no olviden reemplazar las direcciones de las imágenes por las que ustedes quieran, así como los links.







var contador = -1;
var capa     = document.getElementById("contenedor");
var lista    = new Array("muestra2.jpg", "muestra3.jpg","muestra4.jpg"); 
var links    = new Array("http://www.vidamrr.com", "http://www.google.com","http://wwww.facebook.com");




view raw gistfile2.txt This Gist brought to you by GitHub.




Después de eso ya nos dedicamos a crear nuestra función llamada ‘slider()’, lo que hace es incrementar en 1 a contador, después verifica que el valor de contador no sea mayor que el número de imágenes que tenemos en el arreglo, si no es así entonces verifica que sea menor, si es así incrementa en 1 a contador,







function slider(){
	if(contador >= (lista.length - 1)){
		contador = 0;
	}else{
		if(contador <  lista.length){
			contador++;
		}
	}
	capa.innerHTML = "<a href='" + links[contador] + "'><img src='" + lista[contador] + "' height='300' width='300' /></a>";
	tiempo=setTimeout("slider()", 2000);
 }




view raw gistfile3.txt This Gist brought to you by GitHub.




Por cierto, dice ”lista.length – 1” porque la longitud del arreglo se mide empezando desde 1, pero para llamar al elemento se empieza por 0, es decir, el elemento 1 del arreglo ‘lista’ lo llamas así: lista[0], el elemento 2: lista[1] y elemento 3: lista[2], y así sucesivamente, por eso le resto 1.



Lo que sigue de las condicionales es insertar el código HTML a nuestra variable capa que tiene asignada el objeto de nuestro contenedor DIV, para escribir en él basta usar la propiedad ‘innerHTML’. Y ya por último ponemos un setTimeout(), un timer, para poder repetir la función cada 2 segundos (dice 2000 porque 1000 milisegundos es 1 segundo)









slider();




view raw gistfile4.txt This Gist brought to you by GitHub.







Por último tenemos que llamar a nuestra función para que se empiece a ciclar.y listo.



El código final sería el siguiente:







<html>
 <head>

 </head>

 
 <body>
	<div id="contenedor">

	</div>

	<script>
		var contador = -1;
		var capa     = document.getElementById("contenedor");
		var lista    = new Array("muestra2.jpg", "muestra3.jpg","muestra4.jpg"); 
		var links    = new Array("http://www.vidamrr.com", "http://www.google.com","http://wwww.facebook.com"); 

		function slider(){
			if(contador >= (lista.length - 1)){
				contador = 0;
			}else{
				if(contador <  lista.length){
					contador++;
				}
			}
			capa.innerHTML = "<a href='" + links[contador] + "'><img src='" + lista[contador] + "' height='300' width='300' /></a>";
			tiempo=setTimeout("slider()", 2000);

		 }
		 slider();
	</script>
 </body>
</html>






Crear un sencillo slider de imágenes Crear un sencillo slider de imágenes Reviewed by Marcos Rivas Rojas on lunes, mayo 30, 2011 Rating: 5