I'm trying to make a small image slide

Question

I'm trying to make a small image slide

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

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 in the way of this if and I can not get the counter back in the image to repeat again.

javascript

asked by anonymous 19.09.2018 / 15:05

2 answers

Where it takes a long time Select a list of values and from this list, select the lowest value

score 2 · Answer 1

That's how 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 it works like a toggle, I used that as a reference question in SOen.

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

And so it goes, infinitely

If you would like more images:

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

score 2 · Answer 2

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

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

Then simply increment the index and use the remainder 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">

Thissolvestheprobleminspecific,howeveramoreinterestingwaytodothisslidewouldbetoaddallthe<img>inacontainer,applyaCSSandgohide/showtheotherimages.Thisway,whenyouloadthepage,allyourimageswillalreadybedownloadedandreadytouse.

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"/><imgsrc="https://via.placeholder.com/150/00ff00/ffffff"/>
  <img src="https://via.placeholder.com/150/0000ff/ffffff"/><imgsrc="https://via.placeholder.com/150/ff00ff/ffffff"/>
</div>