Duda sobre navegador de imágenes
QUE tal Experto, tengo el siguiente navegador de imágenes, y observo que puedo mostrar 4 imágenes, párese que anda para mostrar 4 imágenes nada más. No se que puede ser, ¿cambie las opciones de? Arrays :var misImagenes= new Array(4)
? MisImagenes [0]= "a.jpg";
? MisImagenes [1]= "b.jpg";
? MisImagenes [2]= "c.jpg";
? MisImagenes [3]= "d.jpg";
? MisImagenes [4]= "victor.jpg";
y solo me carga hasta cuatro imagenes q puede ser ?? Yo quiero carga 5 o mas........
Aca esta el codigo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeria Javascript</title>
<script language="javascript">
//Array en la que debemos incluir
// la ruta a todas las im?genes de nuestro album
var misImagenes= new Array(4)
? MisImagenes [0]= "a.jpg";
? MisImagenes [1]= "b.jpg";
? MisImagenes [2]= "c.jpg";
? MisImagenes [3]= "d.jpg";
? MisImagenes [4]= "e.jpg";
var i = 0;
//funcion de carga de la primera imagen
function cargarImagen(){
? Document.imgSrc.src = misImagenes ;
}
function anterior(){
? If(i<1){
??? Var NumImagen = i
? } else {
??? Var NumImagen = i-=1;
? }
? Document.imgSrc.src = misImagenes[NumImagen];
}
function siguiente(){
? If(i>2){
??? Var NumImagen = i
? } else {
??? Var NumImagen = i+=1;
? }
? Document.imgSrc.src = misImagenes[NumImagen];
}
//Llamar a la funci?n
window.onload=cargarImagen;
</script>
<style type="text/css">
.contenedorfoto {
?? Position:relative;?
? Left:350px;
? Top:11px;??
?? Width:210px;
?? Height:180px;
?? Margin: 10px;
?? Padding:2px;
?? Background-color:#f5f7f9;
?? Border-right: #a5a7aa solid 1px;
?? Border-bottom: #a5a7aa solid 1px;
?? Text-align:center;?
}
</style>
</head>
<body>
<div class="contenedorfoto">
<img name="imgSrc" id="imgSrc" alt="Im?genes de la galeria">
</div>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
?
<tr>
???
<td align="center"><a href="#" onClick="anterior();"> ? Anterior</a></td>
???
<td align="center"><a href="#" onClick="siguiente();">Siguiente ? </a></td>
?
</tr>
</table>
</body>
</html>
Desde ya saludos.
? MisImagenes [0]= "a.jpg";
? MisImagenes [1]= "b.jpg";
? MisImagenes [2]= "c.jpg";
? MisImagenes [3]= "d.jpg";
? MisImagenes [4]= "victor.jpg";
y solo me carga hasta cuatro imagenes q puede ser ?? Yo quiero carga 5 o mas........
Aca esta el codigo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeria Javascript</title>
<script language="javascript">
//Array en la que debemos incluir
// la ruta a todas las im?genes de nuestro album
var misImagenes= new Array(4)
? MisImagenes [0]= "a.jpg";
? MisImagenes [1]= "b.jpg";
? MisImagenes [2]= "c.jpg";
? MisImagenes [3]= "d.jpg";
? MisImagenes [4]= "e.jpg";
var i = 0;
//funcion de carga de la primera imagen
function cargarImagen(){
? Document.imgSrc.src = misImagenes ;
}
function anterior(){
? If(i<1){
??? Var NumImagen = i
? } else {
??? Var NumImagen = i-=1;
? }
? Document.imgSrc.src = misImagenes[NumImagen];
}
function siguiente(){
? If(i>2){
??? Var NumImagen = i
? } else {
??? Var NumImagen = i+=1;
? }
? Document.imgSrc.src = misImagenes[NumImagen];
}
//Llamar a la funci?n
window.onload=cargarImagen;
</script>
<style type="text/css">
.contenedorfoto {
?? Position:relative;?
? Left:350px;
? Top:11px;??
?? Width:210px;
?? Height:180px;
?? Margin: 10px;
?? Padding:2px;
?? Background-color:#f5f7f9;
?? Border-right: #a5a7aa solid 1px;
?? Border-bottom: #a5a7aa solid 1px;
?? Text-align:center;?
}
</style>
</head>
<body>
<div class="contenedorfoto">
<img name="imgSrc" id="imgSrc" alt="Im?genes de la galeria">
</div>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
?
<tr>
???
<td align="center"><a href="#" onClick="anterior();"> ? Anterior</a></td>
???
<td align="center"><a href="#" onClick="siguiente();">Siguiente ? </a></td>
?
</tr>
</table>
</body>
</html>
Desde ya saludos.
1 respuesta
Respuesta de krlosnow
1
Si quieres cargar 5, tienes que poner:
var misImagenes= new Array(5);
Si pones 4, como es natural, solo saldrán 4.
Me parece que lo que te está pasando es que te estás liando con los índices del array. En javascript, al igual que en Java o en C, los arrays tienen base 0, es decir, que el primer elemento es array[0], y el último array[N-1], siendo N el número de posiciones que tiene el array. Para tu caso, como N=5, el array se recorre desde array[0] a array[4]
var misImagenes= new Array(5);
Si pones 4, como es natural, solo saldrán 4.
Me parece que lo que te está pasando es que te estás liando con los índices del array. En javascript, al igual que en Java o en C, los arrays tienen base 0, es decir, que el primer elemento es array[0], y el último array[N-1], siendo N el número de posiciones que tiene el array. Para tu caso, como N=5, el array se recorre desde array[0] a array[4]
oK, el tema de mi duda es
function anterior(){
if(i<1){
var NumImagen = i
} else {
var NumImagen = i-=1;
}
document.imgSrc.src = misImagenes[NumImagen];{
o
function siguiente(){
if(i>2){
var NumImagen = i
} else {
??? var NumImagen = i+=1;
}
document.imgSrc.src = misImagenes[NumImagen];
}
var NumImagen = i-=1; o var NumImagen = i+=1;
q significa ? "a=i-=1" probe y no es lo mismo a=i-1, ya va a ser el 4to dia y no logro comprender?
q significa ? "a=i+=1" probe y no es lo mismo a=i+1, ya va a ser el 4to dia y no logro comprender?
function anterior(){
if(i<1){
var NumImagen = i
} else {
var NumImagen = i-=1;
}
document.imgSrc.src = misImagenes[NumImagen];{
o
function siguiente(){
if(i>2){
var NumImagen = i
} else {
??? var NumImagen = i+=1;
}
document.imgSrc.src = misImagenes[NumImagen];
}
var NumImagen = i-=1; o var NumImagen = i+=1;
q significa ? "a=i-=1" probe y no es lo mismo a=i-1, ya va a ser el 4to dia y no logro comprender?
q significa ? "a=i+=1" probe y no es lo mismo a=i+1, ya va a ser el 4to dia y no logro comprender?
Sin ánimo de ofender, el código que me pones es una mierda. Prueba con este:
var imagenActual = 0;
var numTotalImagenes = 5;
function anterior(){
if (imagenActual==0){ imagenActual = numTotalImagenes-1;}
else{imagenActual--};
pintaImagen();
}
function siguiente(){
if (imagenActual==(numTotalImagenes-1)){ imagenActual = 0;}
else{imagenActual++};
pintaImagen();
}
function pintaImagen(){
document.imgSrc.src = misImagenes[imagenActual];
}
var imagenActual = 0;
var numTotalImagenes = 5;
function anterior(){
if (imagenActual==0){ imagenActual = numTotalImagenes-1;}
else{imagenActual--};
pintaImagen();
}
function siguiente(){
if (imagenActual==(numTotalImagenes-1)){ imagenActual = 0;}
else{imagenActual++};
pintaImagen();
}
function pintaImagen(){
document.imgSrc.src = misImagenes[imagenActual];
}
