creare un efetto random con immagini

[supremo]

ciao ragazzi sto cercando il modo di scorrere tutte le immagini e dare un efetto di avanzamento, ogni cinque secondi deve cambiare immagine e mostrare quella succesiva in ordine, al momento ce un problema, non mi mostra le altre immagini, in consola le ricevo tutti di colpo

<img src="clothes/jacket.jpg" id="img">
<button onclick="start()">play</button>
<button onclick="stop()">stop</button>
<script type="text/javascript">
files =['primo.jpg', 'secondo.jpg', 'terzo.jpg', 'quarto.jpg', 'quinto.jpg']
function start(){
    
    img = document.getElementById('img')
    intervalo = setInterval(function(){
        for(i=0; i<files.length; i++){
            console.log(files[i])
            img.setAttribute('src', 'clothes/'+files[i])
        }

    }, 5000)
}

function stop(){

    clearInterval(intervalo)
}

</script>

[codencode]

E' ovvio che in console ti mostra tutte le immagini di colpo, hai inserito nel setInterval un for, in questo modo ogni 5 secondi ti stampa tutte le immagini.