Banner rotativo com efeitos de transição em Java Script
Benedito Silva Júnior
30/11/2021
Com JavaScript é possível criar uma variedade de banners para exibição de conteúdo em sites. Neste post veja banner rotativo com efeitos de transição em Java Script de forma bem prática e fácil
Mão na massa!
Siga o passo a passo abaixo para criar o banner rotativo com efeitos de transição:
1. Antes de tudo, faça o download do jQuery, do plugin do Coin Slider e do arquivo CSS, clicando aqui;
2. Copie os arquivos baixados para o servidor. Devem constar os arquivos “coin-slider-styles.css”, “coin-slider.min.js” e “jquery-1.11.2.min.js”.
O arquivo “jquery-1.11.2.min.js” pode ser omitido, desde que informado um outro arquivo de outro local (veremos isso mais a diante);
3. Faça a chamada dos arquivos do servidor na sua página. Para isso, inclua as seguintes linhas depois da tag </head>:
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />É possível usar um outro arquivo jquery hospedado nos servidores do Google. Para isso, substitua o caminho do jQuery acima por
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.jsDentro das tags <body> inclua as seguintes linhas:
<div id='coin-slider'>
<a href="link" target="_blank"> //link da imagem
<img src='img01.jpg' /> //caminho da imagem
<span>Imagem 01</span> //descrição da imagem
</a>
<a href="link" target="_blank">
<img src='img02.jpg' />
<span>Imagem 02</span>
</a>
<a href="link" target="_blank">
<img src='img03.jpg' />
<span>Imagem 03</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 500, height:313 }); //tamanho do banner
</script>Insira os códigos acima no local desejado da página. Serão mostradas imagens diferentes a cada 5 segundos e entre transições.
Opções de configuração
width: 565, // largura do slider panel
height: 290, // altura do slider panel
spw: 7, // quadros por largura
sph: 5, // quadros por altura
delay: 3000, // intervalo de tempo entre as imagens, em milissegundos
sDelay: 30, // intervalo de tempo entre as imagens, em milissegundos
opacity: 0.7, // opacidade do título e da navegação
titleSpeed: 500, // velocidade de aparição do títuo em milissegundos
effect: ", // random, swirl, rain, straight
navigation: true, // botões anterior e próximo
links : true, // mostrar links nas imagens
hoverPause: true // pausar a transição ao parar o mouse em cima da imagemAtenção ao configurar o “spw” e “sph” pois a colocação de muitos quadros faz a transição ficar muito lenta, e o site também.
Dúvidas ou sugestões sobre banner rotativo com efeitos de transição em Java Script? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Aprenda a consertar o próprio computador como um profissional!
Especialize-se em manutenção preventiva e corretiva, diagnósticos de defeitos e upgrades com aulas passo a passo sem enrolação.
Torne-se também um técnico diferenciado e conquiste o emprego dos seus sonhos com este curso completo de Montagem e Manutenção de Desktops e Notebooks.
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação e apaixonado por tecnologias e games do tempo da vovó!
0 Comentários