Você pode usar o operador %
(resto de divisão) para que o índice sempre esteja dentro do length
do array, é uma solução mais matemática e faz com que sempre funcione, pois depende do tamanho do array.
O resto de divisão sempre vai ser um número entre 0
e o divisor - 1
, ou seja, x % 5
sempre vai ser 0, 1, 2, 3 ou 4.
Aí basta incrementar o índice e usar o resto de divisão para criar um ciclo.
for(let i=0 ; i < numero_qualquer ; i++) {
console.log(i % 5);
}
// Printa: 0,1,2,3,4,0,1,2,3,4,0,1,...
var imagens = [
'https://via.placeholder.com/150/ff0000/ffffff',
'https://via.placeholder.com/150/00ff00/ffffff',
'https://via.placeholder.com/150/0000ff/ffffff',
'https://via.placeholder.com/150/ff00ff/ffffff',
];
var img = document.getElementById('imagem');
var i = 0;
var l = imagens.length;
function slide() {
i = (i + 1) % l;
img.src = imagens[i];
}
setInterval(slide, 2000);
<img id="imagem" src="https://via.placeholder.com/150/ff0000/ffffff">
Isso resolve o problema em específico, porém uma maneira mais interessante de fazer esse slide seria adicionando todas as <img>
em um container, aplicar um CSS e ir esconde/mostrando as outras imagens. Dessa maneira, ao carregar a página, todas suas imagens já estarão baixadas e prontas pra uso.
Ex.:
var container = document.getElementById('container');
var i = 0;
var imgs = container.querySelectorAll('img');
var l = imgs.length
function slide() {
imgs[i].classList.remove('active');
i = (i + 1) % l;
imgs[i].classList.add('active');
}
setInterval(slide, 2000);
#container {
position: relative;
}
#container > img {
position: absolute;
opacity: 0;
transition: opacity 500ms linear;
}
#container > img.active {
opacity: 1;
}
<div id="container">
<img class="active" src="https://via.placeholder.com/150/ff0000/ffffff"/>
<img src="https://via.placeholder.com/150/00ff00/ffffff"/>
<img src="https://via.placeholder.com/150/0000ff/ffffff"/>
<img src="https://via.placeholder.com/150/ff00ff/ffffff"/>
</div>
cont = !cont