Estoy tratando de construir un control deslizante que cambie las imágenes según la región en la que se haga clic en un mapa. Quiero usar matrices para almacenar imágenes en el archivo js, no para enumerarlas en el HTML. Sin embargo, la consola informa "imageArray[imageIndex]:1 GET http://localhost:8000/imageArray[imageIndex] 404 (Archivo no encontrado)"
HTML
<div class="container"> <img id="mainImage" src="Photos/OG/P1000609.JPG" style="width:100%"> <button onClick="changeImage()">next</button>JQuery
var imageArray = ["Photos/OG/P1000389.jpg", "Photos/OG/P1000409.jpg","Photos/OG/P1000589.jpg"]; var imageIndex =0; function changeImage(){ $("#mainImage").attr("src", "imageArray[imageIndex]"); imageIndex ++; sliderLenght = imageArray.lenght; if (imageIndex> sliderLenght) {imageIndex = 0} }; function changeArray(e){ imageArray = e } var region1Array= ["Photos/OG/P1000412.jpg", "Photos/OG/P1000414.jpg"]; $("#region1").click(changeArray(region1Array));Intenté sustituir las imágenes y las carpetas, pero no funciona. ¿Hay alguna manera de hacer que funcione usando matrices, o incluso solo para encontrar esta?
Dado que las rutas de sus imágenes se almacenan en la matriz imageArray , debe asignarla directamente a attr() . No lo incluya entre comillas o comillas dobles.
Además de eso, la longitud de la matriz de JavaScript debe ser array.length , pero fue un error tipográfico en su código que lo escribió como lenght .
En el fragmento a continuación, cambio el mecanismo para cambiar el índice respondiendo primero al clic y luego asigno el elemento en el índice actual (después de actualizar) de imageArray al atributo src del elemento img .
var imageArray = ["https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg", "https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_2560%2Cc_limit/so-logo-s.jpg"]; var imageIndex =0; function changeImage(){ var sliderLenght = imageArray.length; if (imageIndex < sliderLenght - 1) { imageIndex++; } else imageIndex = 0; $("#mainImage").attr("src", imageArray[imageIndex]); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <img id="mainImage" src="https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg" style="width:100%"> <button onClick="changeImage()">next</button> </div> Además de eso, puede mejorar el código eliminando el atributo onClick en el button y agregando el detector de eventos de clic en Javascript
var imageArray = ["https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg", "https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_2560%2Cc_limit/so-logo-s.jpg"]; var imageIndex =0; $('#button').click(() => { var sliderLenght = imageArray.length; if (imageIndex < sliderLenght - 1) { imageIndex++; } else imageIndex = 0; $("#mainImage").attr("src", imageArray[imageIndex]); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <img id="mainImage" src="https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg" style="width:100%"> <button id="button">next</button> </div>