Cambiar imagenes por medio de un boton

[tresh_03]

hola!
tengo un problema, tengo una imagen y necesito que por medio de un boton se pueda ir cambiando son como 6 imagenes, y al hacerlo nada mas me pasa a la 2da, tambien necesito que a la cuarta imagen me salga un listbox y seleccionar una opcion del litsbox y me lleve a otra imagen eso si no tengo la menor idea, orita estoy con el problema de las imagenes, pero como dije no me deja avanzar de la segunda :/!

estos han sido mis intentos fallidos de codigo, alguna sugerencia?, gracias por leer :D!



function change() {
document.getElementById('matrix').src = "grumosa.png";
document.getElementById('matrix').src = "grumosa1.png";
document.getElementById('matrix').src = "grumosa2.png".style.visibility='visible';
document.getElementById('matrix').src = "grumosa3.png";
document.getElementById('matrix').src = "grumosa4.png";
document.getElementById('matrix').src = "grumosa5.png";

}

function volver () {
document.getElementById('matrix').src = "mt05.jpg";
}


function changeImage() {
if (document.getElementById("matrix").src == "grumosa.png")
{
document.getElementById("matrix").src = "grumosa1.png";
}
else if (document.getElementById("matrix").src == "grumosa1.png")
{
document.getElementById("matrix").src = "grumosa3.png";
}
else
{
document.getElementById("matrix").src= "grumosa4.png";
}
}


function visi() {

document.getElementById('primero').src = "grumosa2.png".style.visibility='visible';
document.getElementById('primero').src = "grumosa3.png".style.visibility='visible';

[IsaBelM]

mete todos los nombres y extensiones de las imágenes en un array. por otro lado la función sería algo como

document.getElementById('el que sea').src = array[contador % array.length];

donde contador es un valor que se incrementa a cada llamada de función

[larrysun2]

Aqui te hice un Ejemplo para que te guies.
y sí, es como dice IsaBelM

Código HTML:

<div id="viewer">
    <img id="imgV" src="img0.png" alt="">
    <button onclick="anterior(document.all['imgV'])">anterior</button><button onclick="siguiente(document.all['imgV'])">Siguiente</button>
</div>
<script>
    (function(){
        var i = 0;
        document.all["imgV"].srcList = []
        document.all["imgV"].srcList[0] = "img0.png"
        document.all["imgV"].srcList[1] = "img1.png"
        document.all["imgV"].srcList[2] = "img2.png"
        document.all["imgV"].srcList[3] = "img3.png"
        document.all["imgV"].srcList[4] = "img4.png"
 
        anterior = function(imgElement){
            if(i !== 0){
                i--
            }else{
                alert("esta es la primera foto")
                return;
            }
            imgElement.src = imgElement.srcList[i]
        }
        siguiente = function(imgElement){
            i++
            if(!imgElement.srcList[i]){
                i--
                alert("esta es la ultima foto")
                return;
            }
            imgElement.src = imgElement.srcList[i]
        }
    })()
</script>
 

[IsaBelM]

mi idea era más básica. sólo se podía avanzar. de cualquier modo, la lógica para también retroceder, no difiere mucho de la idea original

<div id="viewer">
<img id="imgV" src="img0.png" alt="">
<button onclick="anterior()">anterior</button><button onclick="anterior(1)">Siguiente</button>
</div>
<script>
(function(i){

var arr = [
"img0.png",
"img1.png",
"img2.png",
"img3.png",
"img4.png"
];

var elem = document.querySelector('#imgV'), largoArray = arr.length-1;

elem.src = arr[i];

anterior = function(bol){

i += (bol) ? 1 : largoArray;

elem.src = arr[i % arr.length];
}

})(0)
</script>