jQuery: Fazer um slideshow
Para começarmos é necessário que façam o download de 2 ficheiros:
jquery.js
jcycle.js
Depois de ter os ficheiros, deve colocar as seguintes linhas de código dentro da tag <head>
<script language="JavaScript" src="caminho/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="caminho/jcycle.js" type="text/javascript"></script>
Para criar o SlideShow temos de criar o seguinte código, com a indicação das imagens que vamos utilizar, este código tem de ficar dentro da tag <body>
Exemplo de código:
<div id="slideShow">
<img src="caminho/imagem1.jpg" alt="Imagem 1" />
<img src="caminho/imagem2.jpg" alt="Imagem 2" />
<img src="caminho/imagem3.jpg" alt="Imagem 3" />
</div/>
Ainda dentro da tag <body> devemos colocar o código da animação.
Exemplo de animação com transição FADE:
<script language="JavaScript" type="text/javascript">
$(function() {
$('#slideShow').cycle({fx:'fade',
sync: 0
});
});
</script>
Podemos utilizar os seguintes tipos de transição: fade, zoom, scrollDown ou shuffle. Pode verificar os 4 tipos de transição em funcionamento clicando AQUI.
Algumas Tags HTML 5
<video>
Nova tag html que permite visualizar stream videos no browser. Pode ainda colocar texto entre o inicio e o fim para os browser mais antigos. Exemplo:
<video src="nome.ogg"
controls="controls">
</video>
<audio>
Nova tag html que permite ouvir musica no browser. Pode ainda colocar texto entre o inicio e o fim para os browser mais antigos. Exemplo:
<audio src="nome.ogg"
controls="controls">
</audio>
<details>
Tag utilizada para descrever detalhes de um documento ou parte do documento. Exemplo:
<details>Este documento foi escrito em 2010.</details>