Mostrando una imagen de una matriz de imágenes - Javascript

Question

Tengo una imagen grande que se muestra en mi página de inicio, y cuando el usuario hace clic en el botón "next_img" la imagen grande en la página principal debe cambiar a la siguiente imagen en la matriz .

Sin embargo, la siguiente flecha al hacer clic no hace nada, y la imagen principal en la página de inicio no cambia.

Necesito hacer esto en javascript.

En el código HTML:

<!--Main Content of the page --> 

<div id="splash"> 
<img src="images/img/Splash_image1.jpg" alt="" id="mainImg"> 

</div> 

<div id="imglist"> 
<a href="javascript:nextImage('mainImg')"><img src="images/next_img.png" alt=""></a> 

Y luego en el archivo javascript:

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'images/img/Splash_image1.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'images/img/Splash_image2.jpg'; 

imgArray[2] = new Image(); 
imgArray[2].src = 'images/img/Splash_image3.jpg'; 

imgArray[3] = new Image(); 
imgArray[3].src = 'images/img/Splash_image4.jpg'; 

imgArray[4] = new Image(); 
imgArray[4].src = 'images/img/Splash_image5.jpg'; 

imgArray[5] = new Image(); 
imgArray[5].src = 'images/img/Splash_image6.jpg'; 

/*------------------------------------*/ 

function nextImage(element) 
{ 
    var img = document.getElementById(element); 

    for(var i = 0;i<imgArray.length;i++) 
    { 
     if(imgArray[i] == img) 
     { 
      if(i == imgArray.length) 
      { 
       var j = 0; 
       document.getElementById(element).src = imgArray[j].src; 
       break; 
      } 
      else 
      var j = i + 1; 
      document.getElementById(element).src = imgArray[j].src; 
      break; 
     } 
    } 
} 

Cualquier ayuda sería muy apreciada. Gracias.

Answer 1

Así como Diodeus dijo, estás comparando un Image con un HTMLDomObject. En lugar de comparar su .src atributo:

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'images/img/Splash_image1.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'images/img/Splash_image2.jpg'; 

/* ... more images ... */ 

imgArray[5] = new Image(); 
imgArray[5].src = 'images/img/Splash_image6.jpg'; 

/*------------------------------------*/ 

function nextImage(element) 
{ 
    var img = document.getElementById(element); 

    for(var i = 0; i < imgArray.length;i++) 
    { 
     if(imgArray[i].src == img.src) // << check this 
     { 
      if(i === imgArray.length){ 
       document.getElementById(element).src = imgArray[0].src; 
       break; 
      } 
      document.getElementById(element).src = imgArray[i+1].src; 
      break; 
     } 
    } 
} 

Answer 2

Aquí es su problema:

if(imgArray[i] == img) 

que está comparando un elemento de matriz a un objeto DOM.

Answer 3

Aquí está una manera un poco más limpio de la aplicación de este. Esto hace los siguientes cambios:

1. El código se secó un poco para eliminar el código redundante y repetido y las cadenas.
2. El código se hace más genérico/reutilizable.
3. Hacemos que la memoria caché se convierta en un objeto por lo que tiene una interfaz independiente y hay menos elementos globales.
4. Comparamos los atributos .src en lugar de los elementos DOM para que funcionen correctamente.

Código:

function imageCache(base, firstNum, lastNum) { 
    this.cache = []; 
    var img; 
    for (var i = firstNum; i <= lastnum; i++) { 
     img = new Image(); 
     img.src = base + i + ".jpg"; 
     this.cache.push(img); 
    } 
} 

imageCache.prototype.nextImage(id) { 
    var element = document.getElementById(id); 
    var targetSrc = element.src; 
    var cache = this.cache; 
    for (var i = 0; i < cache.length; i++) { 
     if (cache[i].src) === targetSrc) { 
      i++; 
      if (i >= cache.length) { 
       i = 0; 
      } 
      element.src = cache[i].src; 
      return; 
     } 
    } 
} 

// sample usage 

var myCache = new imageCache('images/img/Splash_image', 1, 6); 
myCache.nextImage("foo"); 

Algunas de las ventajas de esta más orientado a objetos y se seca enfoque:

1. se puede añadir más imágenes por sólo la creación de las imágenes en las secuencias numéricas y el cambio de uno numérico valor en el constructor en lugar de copiar muchas más líneas de declaraciones de matriz.
2. Puede usar esto más de un lugar en su aplicación simplemente creando más de un objeto imageCache.
3. Puede cambiar la URL base cambiando una cadena en lugar de N cadenas.
4. El tamaño del código es más pequeño (debido a la eliminación de código repetido).
5. El objeto de caché podría ampliarse fácilmente para ofrecer más capacidades, como la primera, última, omisión, etc. ...
6. Puede agregar la gestión de errores de centralización en un solo lugar, de modo que si una imagen no existe y no lo hace cargar con éxito, se elimina automáticamente de la memoria caché.
7. Puede reutilizar esto en otras páginas web que desarrolle cambiando solo los argumentos al constructor y no cambiando realmente el código de implementación.

P. S. Si no sabes qué significa DRY, es "No repetir" y básicamente significa que nunca deberías tener muchas copias de código similar. Cada vez que tenga eso, se reducirá de alguna manera a un bucle o función o algo que elimine la necesidad de muchas copias de código de aspecto similar. El resultado final será más pequeño, generalmente más fácil de mantener y, a menudo, más reutilizable.

Answer 4

Además, cuando busque la última imagen, debe compararla con imgArray.length-1 porque, por ejemplo, cuando la longitud de la matriz es 2, tomaré los valores 0 y 1, no alcanzará el valor 2, por lo tanto debe comparar con la longitud-1 no con la longitud, aquí está la línea fija:

if(i == imgArray.length-1) 

Answer 5

Este es un ejemplo simple y tratar de combinarlo con la suya usando algunas modificaciones. Yo prefiero asignar a todas las imágenes en una matriz con el fin de hacer que su código sea más fácil de leer y más corto:

var myImage = document.getElementById("mainImage"); 

var imageArray = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg", 
    "_images/image4.jpg","_images/image5.jpg","_images/image6.jpg"]; 

var imageIndex = 0; 

function changeImage() { 
    myImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex = (imageIndex + 1) % imageArray.length; 
} 

setInterval(changeImage, 5000); 

Answer 6

<script type="text/javascript"> 
function bike() 
{ 
var data= 
["b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg", "b5.jpg", "b6.jpg", "b7.jpg", "b8.jpg"]; 
var a; 
for(a=0; a<data.length; a++) 
{ 
document.write("<center><fieldset style='height:200px; float:left; border-radius:15px; border-width:6px;")<img src='"+data[a]+"' height='200px' width='300px'/></fieldset></center> 
} 
}