1

Tenho o seguinte código para trocar imagem automaticamente em JavaScript.

Queria utilizar ele para deixar como um gif, sem perder a qualidade.

var index = 1;

function changeImage(){

var rand = Math.floor (Math.random () * 4)
  jQuery('.img-rand').hide();
 
 jQuery(jQuery('.img-rand').get(index)).fadeIn();
 index++;

  if (index > 3){
   index = 0;
  }
}

setInterval(changeImage, 500);
.img-rand{
  display:none;
}
<div class="imagemconjunto ">

<img class="img-rand" src="{{media url="wysiwyg/Paginas/kitbody/profissoes.png"}}" alt="" />
<img  class="img-rand"  src="{{media url="wysiwyg/Paginas/kitbody/profissoes2.png"}}" alt="" />

</div>

Porém está um efeito muito quebrado. Aalguém sabe uma forma de deixar com um aspecto de gif? No caso é a mesma imagem, apenas um clique aqui numa e na outra sem.

2
  • Ao analisar o seu problema, estou achando que você só precisa redimensionar as imagens para que tenham o mesmo tamanho, assim esse efeito de quebra irá sumir
    – riki481
    26/03/2019 às 13:58
  • Pior que não, se olhar no final da página vai ver o que estou falando boutiqueinfantil.com.br/testando
    – JVEUZEBIO
    26/03/2019 às 14:40

1 Resposta 1

3

Em vez de utilizar setInterval() você poderia usar a função recursiva, utilizando os callbacks do .fadeIn() e do .fadeOut(), fazendo um delay de 500 milissegundos no .fadeOut(). Agora, o index deveria começar do 0, e não do 1, desta forma:

var index = 0;

function changeImage(){

   var rand = Math.floor (Math.random () * 4)
   jQuery('.img-rand').eq(index).fadeIn(function(){
      jQuery('.img-rand').delay(500).eq(index).fadeOut(function(){
         index++;
         // aqui o "1" é se vc possui 2 imagens
         if (index > 1) index = 0;
         changeImage();
      });
   });
   
}
changeImage();
.img-rand{
  display:none;
  width: 200px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imagemconjunto ">
   <img class="img-rand" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="" />
   <img class="img-rand"  src="https://tinyjpg.com/images/social/website.jpg" alt="" />
</div>

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 .