Efeito "Fade"em Banner automático feito só em java Script

Lisbi · 2 de fevereiro de 2017

Olá Pessoal

Estou começando com programação na web e me deparei com uma situação que gostaria de fazer em meu projeto!

No site, na pagina inicial existem dois banners automático de tamanhos diferentes, ambos eu os fiz somente usando javascript e css, a velocidade eu posso alterar de acordo com o script, oque desejo é modificar a forma de transição de um deles, colocando aquele efeito fade que suaviza a transição! Gostaria de saber se é possivel acrescentar ao meu código esse efeito na transição!?

script

function anuncio1(){
document.getElementById('a1').src="imagens/images/image1.png";
setTimeout("anuncio2()", 3000)
}
 
function anuncio2(){
document.getElementById('a1').src="imagens/images/image2.png";
setTimeout("anuncio3()", 3000)
}
 
function anuncio3(){
document.getElementById('a1').src="imagens/images/image3.png";
setTimeout("anuncio4()", 3000)
}
function anuncio4(){
document.getElementById('a1').src="imagens/images/image4.png";
setTimeout("anuncio1()", 3000)
}

css

#a1 {
    margin-top:3px;
}

html

<div class="corpo cinza">
  <div class="conteudo cinza">
  <div class="slide1">
  <img id="a1" src="imagens/images/image1.png" width="100%">
  </div>
  </div>
 </div>

Desde ja agradeço!

DiF · 3 de fevereiro de 2017

@Lisbi Olá, seja bem vindo em nosso Clube do Hardware.

O problema do seu código é o jeito como tentou fazer.

Não se usa o setTimeOut para isso, nesse caso deve-se usar o setInterval()

Por exemplo podes fazer desta maneira:

<div class="corpo cinza">
  <div class="conteudo cinza">
  <div class="slide1">
  <img id="a1" src="http://gamegeex.blogomancer.com/files/gamegeex/images/headerimages/871_mounted-combat-rides-into-skyrim.png" width="100%">
  </div>
  </div>
 </div>

function padrao(){
   
   var padrao = document.getElementById('a1').getAttribute('src');
   document.getElementById("a1").src = padrao; 
}

function anuncio1(){
	document.getElementById('a1').src="https://3.bp.blogspot.com/-6ab8DNbChtM/V3-verCjfGI/AAAAAAAAb1M/UoJjtys2o2YDdFyrEuSfVvCrwenDGYBZQCCo/s800/Enderal-TES-V-Skyrim_character-and-talent-system-guide.jpg";
}

 
function anuncio2(){
	document.getElementById('a1').src="http://gamenacho.com/wp-content/uploads/2011/11/Skyrim_Werewolf.jpg";
}

function anuncio3(){
	document.getElementById('a1').src="https://img.ifcdn.com/images/f97976313b7c437c2684707fecbc38a6abac4beca372d05e896a65fd2f1202d8_3.jpg";
}
function anuncio4(){
	document.getElementById('a1').src="https://hydra-media.cursecdn.com/skyrim.gamepedia.com/thumb/3/3d/Assassination_Move1.png/400px-Assassination_Move1.png?version=7b84e2cd51f01e39abcb810f012128fd";

}

var intervalFunctions = [padrao, anuncio1, anuncio2, anuncio3, anuncio4];
var intervalIndex = 0;


window.setInterval(function(){
  intervalFunctions[intervalIndex++ % intervalFunctions.length]();
}, 3000);

Basicamente, foi criada uma função padrao() para setar a imagem existente no src da imagem que será a padrão, ou seja, a inicial.

Note que em cada função somente atribui uma nova imagem no src.

A mágica da coisa está primeiro na variábel intervalFunctions. onde ela recebe um vetor(array) de funções. As quais você quer chamar.

Depois temos uma variável para receber o valor do índice deste array.

Aí logo em seguida vem o pulo do gato, onde você vai fazer ele mudar de imagem a cada 3 segundos.

a função window.setInterval() recebe como parâmetro uma função vazia.

dentro desta função você chama a variável de funções que é o nosso array e seta um incremento dos índices, ou seja, intervalIndex++, é a mesma coisa que intervalIndex = intervalIndex + 1

O simbolo % ali é o restante da divisão entre o valor incrementado do índice pelo tamanho do array.

O 3000 ali é os 3 segundos de tempo.

Basicamente é isso.

Veja funcionando o exemplo: https://jsfiddle.net/dife/10115p2s/1/

PS: eu coloquei outras imagens ali só para testes mesmo.

Particularmente, acho que é mais fácil reduzir isso tudo com jQuery. onde com jQuery poderá inserir facilmente o efeito de fadeIn.

Basicamente a linha que faz o efeito é esta:

 $("#a1").fadeOut(1000, function() {
        $("#a1").attr("src", "LInk da imagem ");
    }).fadeIn(1000);

Veja que primeiro setamos o fadeOut e dentro dele setamos o valor do SRC da imagem. Como o jQuery é encadeado, chamamos o fadeIn() logo depois.

Veja funcionando com efeito Fade in Fade out: https://jsfiddle.net/dife/Ln2shu6z/

Boa sorte

Lisbi · 3 de fevereiro de 2017

@DiF Obrigado pela explicação, mesmo sendo muito novo pra mim,entendi bem! Eu também acho que com algum plugin Jquery seria mais fácil, cheguei a testar o Jquert Cycle, mas gostaria que esses banners no meu projeto fossem responsive (também não sei exatamente se posso tornar um elemento em responsive) ai passei pra um Jquery de slider responsive, só que não conseguir fazer as mudanças nele através do código javascript com as funções! Os dois slides tinha o mesmo tempo de transição, mas agora com o código do fade que vc acabou de mostrar, acho que da pra aplicar no plugin!

Tenho um duvida, o site fica mais leve com os bannes feitos somente com JavaScript em relação a Plugins jquery?

Veleu ai,

Obrigado

DiF · 3 de fevereiro de 2017

@Lisbi

43 minutos atrás, Lisbi disse:

Tenho um duvida, o site fica mais leve com os bannes feitos somente com JavaScript em relação a Plugins jquery?

Não, pesam a mesma coisa... mas por exemplo se fizesse um banner rotativo com CSS3 e animations, aí sim seria mais leve.

No seu código você pode usar a responsividade combinada com media queries.

Trata-se de uma regra CSS que é acionada quando uma certa resolução é atingida.

exemplo:

@media (max-width: 600px){
   #a1{
    margin-top:3px;
    width: 50%;
    height: 50%;
   }
}

Isso faz com que quando o width máximo for de 600px a imagem será redimensionada para 50% de width: e height.

Veja o mesmo exemplo que postei acima, de forma responsiva: https://jsfiddle.net/dife/Ln2shu6z/1/

Não precisa procurar plugin jquery para responsividade, basta fazer com CSS!

adicionado 23 minutos depois

PS: devo lembrar é possível fazer esse banner somente com HTML 5 e CSS 3 e no javascript é possivel refinar para eliminar o monte de funções.. por exemplo criar um array de imagens e iterar este array inserindo-as no elemento img.

Todas as formas estão corretas. Não existe uma forma errada ou certa definitiva!

Á única diferença que posso dizer é que quanto mais linhas seu javascript tiver, maior será o arquivo, por consequência terá maior tempo de carregamento!

Outra dica, é unificar todos os códigos Javascript em um mesmo arquivo. ou seja, assim permite que carregue apenas um arquivo com todas as suas funções!

Claro que arquivos de source jQuery CDN e outros plugins devem ser carregados separadamente e em ordem... mas se for um arquivo js criado para suas funções do seu site é melhor unificar tudo!

Lisbi · 3 de fevereiro de 2017

Que maravilha, então não importa o plugin que eu use! No fim das contas, podemos transformar o site em responsive apenas com css, media queries. Valeu , Resolveu minha duvidas!