Tengo el siguiente código que me funciona correctamente. Se compone de:
- Una clase llamada Galería
- Creamos un objeto de esta clase Galeria (llamado galeria).
- Atributos.
- Métodos necesarios para el funcionamiento de la interfaz.
- Eventos de botón.
¿Es buena práctica hacer uso de las variables usando var
al ser privadas? ¿Sería más legible utilizar let
al ser variables locales? ¿Debería hacer la llamada a los métodos desde el objeto mediante galería.metodo()
o podría utilizar directamente el método?
Una sería de dudas... El código funciona pero igual existen incoherencias.
Código:
/*Siempre que queremos cargar la página haremos esta función*/
/*Al cargar la página realiza esta llamada a la función*/
$(document).ready(function() {
//Creamos un objeto de la clase Galería. Le pasamos el parámetro necesario.
galeria = new Galeria(7);
});
//Creamos la clase Galería con su método constructor, sus atributos y sus diferentes métodos necesarios.
var Galeria = function(imagenes){
//Indice de la imagen que se está mostrando (cursor).
var cursor = 0;
//Array con imágenes.
var arrayImages = new Array();
//Cantidad de imágenes.
var numImages = imagenes; //7 imagenes de Juego de Tronos.
//Añadimos las imagenes con un "for" al array "arrayImages".
for(var i=1; i<=numImages; i++){
arrayImages.push("foto"+i+".jpg");
}
//Generamos un número aleatorio entre 1 y 7 y ese número se le asignamos al array "arrayImages".
var imagenAleatoria = function(){
cursor = (Math.round(Math.random()*100))%imagenes;
return arrayImages[cursor];
}
//Cursor en la primera posición del array, devolviendo el nombre de la imagen que hay en la misma.
var primeraPosicion = function(){
cursor = 0;
return arrayImages[cursor];
}
//Cursor en la última posición del array, devolviendo el nombre de la imagen que hay en la misma.
var ultimaPosicion = function(){
cursor = arrayImages.length-1;
return arrayImages[cursor];
}
//Cursor en la posicion ANTERIOR a la actual, devolviendo el nombre de la imagen que hay en la misma.
var posicionAnteriorActual = function(){
if(cursor>0){
cursor--;
return arrayImages[cursor];
}else{
return arrayImages[0];
}
}
//Cursor en la posicion SIGUIENTE a la actual, devolviendo el nombre de la imagen que hay en la misma.
var posicionSiguienteActual = function(){
if(cursor<6){
cursor++;
return arrayImages[cursor];
}else{
return arrayImages[6];
}
}
//Inicialmente se cargará una imagen al azar.
var inicializarImagen = function(){
//En JS: document.getElementById("imagen").setAttribute("style", "background-image:.....");
$('#imagen').css({'background-image': 'url(images/'+imagenAleatoria()+')'});
console.log(cursor);
}
inicializarImagen();
//Comprobar donde está el cursor.
var comprobarCursor = function(){
//Quitamos las dos clases "habilitado" y "deshabilitado" al principio del método.
$("#botones a").removeClass("habilitado deshabilitado");
console.log(cursor);
if(cursor == 0){
$('#primera').addClass("deshabilitado");
$('#anterior').addClass("deshabilitado");
$('#siguiente').addClass("habilitado");
$('#ultima').addClass("habilitado");
}else if(cursor == 6){
$('#primera').addClass("habilitado");
$('#anterior').addClass("habilitado");
$('#siguiente').addClass("deshabilitado");
$('#ultima').addClass("deshabilitado");
}else{
$('#primera').addClass("habilitado");
$('#anterior').addClass("habilitado");
$('#siguiente').addClass("habilitado");
$('#ultima').addClass("habilitado");
}
}
//Eventos de botones. Las gestionamos con código jQuery.
$('#siguiente').click(function(){
$('#imagen').css({'background-image': 'url(images/'+posicionSiguienteActual()+')'});
comprobarCursor();
});
$('#anterior').click(function(){
$('#imagen').css({'background-image': 'url(images/'+posicionAnteriorActual()+')'});
comprobarCursor();
});
$('#primera').click(function(){
$('#imagen').css({'background-image': 'url(images/'+primeraPosicion()+')'});
comprobarCursor();
});
$('#ultima').click(function(){
$('#imagen').css({'background-image': 'url(images/'+ultimaPosicion()+')'});
comprobarCursor();
});
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Galería de imágenes</title>
<script src="js/jquery.js"> </script>
<script src="js/galeria.js"> </script>
<link rel="stylesheet" href="style/estilo.css"/>
</head>
<body>
<div id="contenedor">
<div id="galeria">
<h2>Visor de personajes</h2>
<div id="imagen"> </div>
<div id="botones">
<ul>
<li><a href="#" id="primera">PRIMERA</a></li>
<li><a href="#" id="anterior">ANTERIOR</a></li>
<li><a href="#" id="siguiente">SIGUIENTE</a></li>
<li><a href="#" id="ultima">ULTIMA</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>