Rotador de imagenes en Javascript se vuelve loco

[Alexis88]

Podrías juntar la imagen y el texto que le corresponda en un <div>, repitiendo la misma operación por cada imagen y texto que tengas, luego, en lugar de iterar sobre los elementos <img>, lo harías sobre los elementos <div> y para que sea más exclusivo, coloca la misma clase a todos los <div> y los tomas por dicho dato.

Código HTML:

<div class = "slider">
    <img src = "imagen1.jpg" />
    <label>Texto 1</label>
</div>
 
<div class = "slider">
    <img src = "imagen2.jpg" />
    <label>Texto 2</label>
</div>
 
<div class = "slider">
    <img src = "imagen3.jpg" />
    <label>Texto 3</label>
</div>
 

Código Javascript:

var img = document.getElementsByClassName("slider"),
    total = img.length,
    i = 0,
    fn = function(){
        img[i].style.opacity = 0;
        i = i == total - 1 ? 0 : ++i;
        img[i].style.opacity = 1;        
    };
 
img[i].style.opacity = 1;
setInterval(fn, 4000);
 

No olvides aplicar estilos (CSS).

Saludos