I’m trying to make a little picture slide

Question

var cont = 0;
var imgss = [];
var refrescar = 1;

imgss[0] = "../_imagem/primerr.png";
imgss[1] = "../_imagem/cab.png";

function contar (){

    document.images.item(0).src = imgss[cont++];
        if(cont == 1){

        }
        setTimeout("contar()", refrescar * 2000);
}
window.opener = contar()

But I got caught up in it if and I can’t get the counter to go back in the image to repeat again.

Answer 1

That way it works:

var cont = 0;
var imgs = [];
var refrescar = 1;

imgs[0] = "https://www.w3schools.com/html/pic_trulli.jpg";
imgs[1] = "https://www.w3schools.com/html/img_chania.jpg";

function contar() {
  cont = 1 - cont;
  document.images.item(0).src = imgs[cont];
  setTimeout("contar()", refrescar * 2000);
}
window.opener = contar()

<img/>

Basically works as a toggle, I used as a reference question in the Soen.

cont = 1 - 1; // 0
cont = 1 - 0; // 1

And so on and so forth

---

In case you wanted more pictures:

var cont = 2;
var imgs = [];
var refrescar = 1;

imgs[0] = "https://www.w3schools.com/html/pic_trulli.jpg";
imgs[1] = "https://www.w3schools.com/html/img_chania.jpg";
imgs[2] = "https://i.stack.imgur.com/xMglq.png?s=32&g=1";

function contar() {
  cont = (imgs.length - 1 === cont ? 0 : ++cont );
  document.images.item(0).src = imgs[cont];
  setTimeout("contar()", refrescar * 2000);
}
window.opener = contar()

<img/>

Answer 2

You can use the operator % (divide remainder) so that the index is always within the length array, is a more mathematical solution and makes it always work because it depends on the size of the array.

The rest of division will always be a number between 0 and the divisor - 1, that is to say, x % 5 will always be 0, 1, 2, 3 or 4.

Then just increment the index and use the rest of the division to create a cycle.

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">

---

This solves the specific problem, but a more interesting way to do this slide would be to add all the <img> in a container, apply a CSS and go hide/show the other images. This way, when loading the page, all your images will be already downloaded and ready for use.

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>