Hola espero que este bien.
Te molesto para pedir una opinión.
Hice una barra de scroll horizontal en la cual me deja ver todas las imagenes que necesito.
Este fragmento muestra donde tengo el problema.
Código HTML:
<div class="barra-panel borde-Panel punta-Izq punta-Der">
<div class="barra-Scroll">
<div class="contiene-Item"><img src='./img01.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img02.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img03.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img04.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img05.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img06.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img07.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img08.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img09.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img10.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img11.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img12.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img13.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img14.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img15.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img16.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img17.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img18.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img19.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img20.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img21.jpg' width="150px" height="100px"></div>
</div>
</div>
Como es evidente necesitaba hacer eso en una sola línea para garantizarme que no dependiera de la cantidad de imagenes el tener que tocar la página. Fue así que desarrolle lo mismo con un array.
Pero este código solo me muestra la primera imagen y no el resto.
Código HTML:
<!doctype html>
<html lang="es">
<!-- Galeria de imagenes -->
<head>
<meta charset="utf-8">
<title>Barra Horizontal de Guchi</title>
</head>
<body>
<style>
/* Barra Horizontal de Corrimiento */
.barra-panel {overflow:auto; position:absolute; left:10px; top:80%; width:98.5%; right:20; 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: 3630px;} /* Aca entran 20 fotos con un incremento de 130px por fotograma +/- */
.contiene-Item {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">
<div class="contiene-Item"><img id="fotos" width="150px" height="100px"></div> *** ESTA ES LA LINEA DEL PROBLEMA ***
</div>
</div>
</body>
<script>
var i = 0;
Ki = 22; var misImagenes= new Array(Ki);
for (k = 0; k < Ki; k++) {
if(k<10) {misImagenes [ k ] ="file:///C:/barra/img0"+k+".jpg";} else {
misImagenes [ k ] ="file:///C:/barra/img"+k+".jpg";}
}
function agregar() {
if(i>20){ var NumImagen = 0; i=1 } else { var NumImagen = i+=1; }
document.getElementById("fotos").src = misImagenes[(i-1)];
}
window.onload=agregar;
</script>
</html> Bueno... Espero que puedas darme alguna opinión al respecto. Muchas Gracias!!