Galeria que no hace bucle

nnggnzalez · #1 (**permalink**) 27/05/2013, 08:55

Buenas soy nuevo aquí,
Estoy haciendo una galería en mi web con arrays y quiero que al llegar a la última imagen y darle a + me vuelva al principio, o se quede en ésa misma imagen. LA cosa es que me lleva a un array nuevo que no encuentra: undefined. He repasado el código mil veces y no sé qué puede estar mal. Aquí os lo dejo a ver si alguien me puede ayudar. Gracias!!

<header>
<script language="javascript">

var misImagenes= new Array()
misImagenes [0]= "img/salpimentero.png";
misImagenes [1]= "img/salpimentero_2.png";
misImagenes [2]= "img/salpimentero_3.png";
misImagenes [3]= "img/salpimentero_4.png";
misImagenes [4]= "img/salpimentero_5.png";
misImagenes [5]= "img/salpimentero_6.png";

var texto= new Array()
texto [0]= "primera foto";
texto [1]= "segunda foto";
texto [2]= "tercera foto";
texto [3]= "cuarta foto";
texto [4]= "quinta foto";
texto [5]= "sexta foto";

var valor= new Array()
valor [0]= '1';
valor [1]= '2';
valor [2]= '3';
valor [3]= '4';
valor [4]= '5';
valor [5]= '6';
valorTotal= valor.length;
var i = 0;
var ultima = misImagenes.length-1;

function cargarImagen(){
document.imgSrc.src = misImagenes[i];
document.getElementById("texto").innerHTML=texto[i];
document.getElementById("valor").innerHTML=valor[i];
document.getElementById("valor_total").innerHTML=v alorTotal;
val.innerHTML=NumImagen;}

function anterior(){
if(i<1){
var NumImagen = i;
} else {
var NumImagen = i-=1;
}
document.imgSrc.src = misImagenes[NumImagen];
document.getElementById("valor").innerHTML=valor[i];
document.getElementById("texto").innerHTML=texto[i];
document.getElementById("valor_total").innerHTML=v alorTotal;
}

function siguiente(){
if(i>ultima){
var NumImagen = i;
} else {
var NumImagen = i+=1;
}
document.imgSrc.src = misImagenes[NumImagen];
document.getElementById("texto").innerHTML=texto[i];
document.getElementById("valor").innerHTML=valor[i];
document.getElementById("valor_total").innerHTML=v alorTotal;
}

window.onload=cargarImagen;

</script>

</header>
<body>
<section class="galeria">
<img name="imgSrc" id="imgSrc"/>

<article id="caption">
<a href="#" onClick="anterior();" class="ant">-</a>
<span id="valor"></span>/<span id="valor_total">3</span>
<a href="#" onClick="siguiente();" class="post">+</a>
</article>
<article id="descripcion_proyecto">
<h2>PONCELET_ Statioonary</h2>
<p id="texto" name="texto"></p>
</article>
</section>
</body>

marlanga · #2 (**permalink**) 27/05/2013, 09:00

Pon tu codigo en
http://jsfiddle.net/

Y así quien te ayude lo tendrá mucho mas fácil.

Por otro lado, tu código es una pesadilla.

Empieza por reescribirlo. Pásale argumentos a las funciones, evita variables globales siempre que puedas, crea una función que muestre la imagen elegida, en vez de poner el mismo código que hace ésto en 3 o 4 sitios diferentes. Elige una estructura de datos mejor para almacenar las imágenes y sus atributos, por ejemplo:

Código Javascript:

Ver originalvar imagenes=[{url:"img/salpimentero.png", texto: "primera foto", valor:"1"},{url:"img/salpimentero_2.png", texto: "segunda foto", valor:"2"}, .....  ];

Luego con imagenes[i] accedes a todo. ( imagenes[i].url, imagenes[i].texto, imagenes[i].valor).