en js tengo un objeto que contiene 3 imágenes

 HTMLCollection(3) [img.lineup-image-1.images, img.lineup-image-2.images, img.lineup-image-3.images]

y una etiqueta de anclaje con una función onclick que se supone que funciona como un botón "siguiente" en una presentación de diapositivas.

 function next(){ for (i = 0; i < slides.length; i++) { if (i == slides.length - 1) { console.log(i); slides[0].style.zIndex = "20"; slides[i].style.zIndex = "10"; } } for (i = 0; i < slides.length; i++) { if (i !== slides.length - 1) { slides[i].style.zIndex = "10"; slides[i + 1].style.zIndex = "20"; console.log("rokoko"); } } }

Lógica que estoy tratando de escribir:

3 imágenes están colocadas absolutamente una encima de la otra y la última se muestra en la parte superior.

Primero, a todos los elementos del objeto se les asigna un índice z de 10. Después de eso, asigno el último elemento con un índice z de 20.

Si se hace clic en el botón y la diapositiva actual es la última indexada en el objeto -> cambie el índice z de la diapositiva actual a 10 y cambie el índice z de la primera imagen a 20.

De lo contrario --> proporcione el índice z de la diapositiva actual de 10 y proporcione el índice z de la siguiente diapositiva de 20.

Siento que me estoy perdiendo en los matices de cómo funciona el bucle for, sé dónde está el problema (primero para las comprobaciones de bucle del último objeto y cuando es verdadero cambia los índices z, pero el segundo bucle pasa por los elementos del objeto justo después de eso y cambia los índices z a la vez), pero ¿cómo construirlo para que el programa también pueda verificar si la "imagen actual" no es la última y también cambiar los índices z en consecuencia? Gracias