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()

Mas me atrapalhei nesse if e não consigo fazer o contador voltar na imagem para repetir de novo.

7
  • Se so forem duas imagens, e os índices são 0 e 1, pode fazer um "toggle" cont = !cont 19/09/2018 às 13:09
  • maus mano que sou meio nobb nesses operadores boto esse cont=!cont no if ou em baixo? 19/09/2018 às 13:17
  • A pergunta antes é, serão somente duas imagens? 19/09/2018 às 13:18
  • so duas kk pq tem q ser mais pra dar certo? 19/09/2018 às 13:18
  • Coloca o código HTML ao menos. Para que assim possamos criar uma resposta interessante. 19/09/2018 às 13:19

2 Respostas 2

2

Desse jeito funciona:

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

Basicamente funciona como um toggle, usei como referencia essa pergunta no SOen.

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

E por ai vai, infinitamente


Caso você quisesse ter mais imagens:

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

3
  • mano esse ta só exibindo a segunda imagem e da error 19/09/2018 às 13:23
  • Clique no executar e veja funcionando aqui mesmo =], provavelmente errou em alguma coisa 19/09/2018 às 13:24
  • assim kk tinha esqueçido de tirar o ++ do imgs[cont++]; 19/09/2018 às 13:26
2

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>

2
  • Gosto mais da sua solução =] 19/09/2018 às 13:53
  • O bom é que desse jeito é só substituir i = (i + 1) % l por i = (i + 1) % imagens.length que dá pra ir adicionando imagens dinamicamente. :D 19/09/2018 às 13:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .