Ejercicio 001
Esta codificación permite crear una galería de imágenes en una página HTML5 por medio de una Barra de Corrimiento Horizontal (Scroll). Una vez que presionamos el Botón para repetir la acción. Limpia el Vector y vuelve a cargar todo de nuevo.
<!doctype html>
<html lang="es">
<!--
Te permite ver (n) imagenes en tira de acuerdo a tus necesidades
Si presiono el boton... LIMPIA LOS VECTORES y COMIENZA DE NUEVO
Galeria de imagenes
Cadena >>>>>>>>>>>>>>>>>>>> file:///C:/barra/img01.jpg
-->
<head>
<meta charset="utf-8">
<title>Barra Horizontal V.05</title>
</head>
<body onload="agregar()">
<style>
/* Barra Horizontal de Corrimiento */
.barra-panel {overflow:auto; position:absolute; left:10px; top:80%; width:98.5%; right:20px; height:140px; z-index:1; }
.borde-Panel {border: 1px solid RGB(0,0,0); background: RGB(215,201,168); }
.punta-Izq {border-top-left-radius: 5px; }
.punta-Der {border-top-right-radius: 5px; }
.barra-Scroll {width: 4500px; } /* Aca entran 20 fotos con un incremento de 130px por fotograma +/- */
.contiene-Item img {border: 1px solid RGB(0,0,0); width:150px; height:100px; float:left; margin: 10px; }
</style>
<div class="barra-panel borde-Panel punta-Izq punta-Der">
<div class="barra-Scroll" id="tira">
</div>
</div>
<input type="button" onclick="agregar()" value="Dame clic"/>
</body>
<script>
var bandera=0; // impide que limpie el vector recien creado al inicio del proceso
var kT = 11; // Cantidad de Imagenes
var misImagenes= new Array(kT); // Vector con las imagenes
// Completo el Vector con 22 imagenes
for (k = 0; k < kT; k++) {
if(k<10) {misImagenes [k] ="./Imagenes/img0"+k+".jpg";} else {
misImagenes[k] ="./Imagenes/img"+k+".jpg";}
};
function agregar() {
// **** Limpiar y recomenzar *****************************************************
if (bandera!=0) {
var kT=11;
for (k = 0; k < kT; k++) {
var papa = document.getElementById("P0"+k);
papa.parentNode.removeChild(papa);
}
};
// **** Carga las Imagenes *******************************************************
var kT=11;
for (k = 0; k < kT; k++) {
var elemento = document.createElement("div");
elemento.id="P0"+k;
elemento.className = "contiene-Item img";
elemento.innerHTML = "<img id=H0"+k+" src="+misImagenes[k]+">";
document.getElementById("tira").appendChild(elemento);
// document.getElementById('padre').insertBefore(nuevo_parrafo,segundo_p);
}
bandera=1;
};
</script>
</html>
No hay comentarios:
Publicar un comentario