Quer seu anúncio aqui ? Temos preços especiais.

07/09/2017

Como fazer um banner de destaque que muda o conteúdo a cada 5 segundos

Nenhum comentário :
simbolo do desenvolvimento
Este pode ser um banner de destaque de artigo caso as modificações nescesárias sejam feitas, mas com código que passaremo você já pode fazer um banner que muda a cada 5 segundos com 4 imagens para banner diferente, para o banner teremos que usar 3 tecnoligias client-side o HTML5 para estruturação (semântica), CSS3 para o efeito de transição leve e não brusco e o mais importante, o Java Script para fazer a mudança a cada 5 segundos.

HTML5

Dentro da tag body adicione o seguinte código:

<img class="slide active" id="sd1" src="banner1.png">
<img class="slide" id="sd2" src="banner2.png">
<img class="slide" id="sd3" src="banner3.png">
<img class="slide" id="sd4" src="banner4.png">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>




CSS3

Dentro da tag head > style (isso quer dizer a tag style dentro da tag head) adicione o seguinte código:

.slide{opacity: 0;position: absolute;top: 20px;left:20px;transition: opacity .25s ease-in-out .25s;}

.active{opacity: 1 !important;}


Java Script

Crie uma tag body > script (isso quer dizer a tag script dentro da tag body) adicione o seguinte código:

var slide = 2;

window.setInterval(trocarsd, 5000);

function trocarsd() {

  if ((slide+1)>5 && (slide+1)!==5) {

  if ((slide-1)!==0) {

    $("#sd"+(slide-1)).removeClass("active");

    $("#sd"+slide).addClass("active");

  }

  else if ((slide-1)==0){

    $("#sd4").removeClass("active");

    $("#sd"+slide).addClass("active");

  }

  slide++;

}

  else if ((slide+1)==5) {

    $("#sd3").removeClass("active");

    $("#sd4").addClass("active");

    slide = 1;

  }

}



Caso você queira vê estes códigos em ação você pode visitar uma demo clicando aqui

Nenhum comentário :

Postar um comentário

Ao acessar e comentar em nossos serviços você concorda com a nossas Politicas de privacidade, com nossos Termos de Uso e com a nossas Políticas de segurança