Esse artigo irá ensinar como criar banners e slides em JavaScript. Banners são imagens constantemente substituídas com o passar do tempo. São comumente usadas em propagandas, por exemplo. Já os slides, são parecidos, mas com a diferença de serem controlados pelo usuário. Será ele quem irá definir se quer ou não passar para a próxima imagem, ou também retroceder a anterior. Esse artigo será composto dos seguintes tópicos:
- Criando banners automáticos;
- Criando banners automáticos com links
- Criando slides.
Criando banners automáticos
Nesse tópico do artigo, será ensinado como criar banners automáticos, ou seja, aqueles que independem do usuário. Nesse código logo abaixo, eu especifiquei três imagens, que serão trocadas entre si a cada segundo, e logo ao chegar na ultima, retornará a primeira, fazendo, assim, um ciclo infinito.
<html>
<head>
<script type="text/javascript">
function slide1(){
document.getElementById('id').src="1.bmp";
setTimeout("slide2()", 1000)
}
function slide2(){
document.getElementById('id').src="2.bmp";
setTimeout("slide3()", 1000)
}
function slide3(){
document.getElementById('id').src="3.bmp";
setTimeout("slide1()", 1000)
}
</script>
<body onLoad="slide1()">
<img id="id">
</body>
</html>Em body, você deverá inserir uma imagem (img) e determinar um id para representá-la. Será nessa imagem que o evento irá ocorrer. Dentro da tag head, já na parte superior do código, é que vamos criar esse evento. Eu criei três funções, cada uma irá determinar a imagem e seu tempo de duração. A primeira função do código é “slide1()”, ela irá determinar que a imagem será 1.bmp, e através do evento setTimeout, ela irá executar o “slide2()” um segundo após ser executada. Esse ultimo, por sua vez, irá trocar a imagem por 2.bmp e depois de um segundo, executará o “slide3()”. Esse fará a mesma troca de imagem, sendo 3.bmp, mas retornará a função “slide1()”, fazendo com que o ciclo continue.
Criando banners automáticos com links
Esse é parecido com o anterior, mas com a diferença de que cada banner, ao ser clicado, levará a um link diferente.
<html>
<head>
<script type="text/javascript">
function slide1(){
document.getElementById('id').src="1.bmp";
setTimeout("slide2()", 3000)
document.getElementById('aId').href="link1.html"
}
function slide2(){
document.getElementById('id').src="2.bmp";
setTimeout("slide3()", 3000)
document.getElementById('aId').href="link2.html"
}
function slide3(){
document.getElementById('id').src="3.bmp";
setTimeout("slide1()", 3000)
document.getElementById('aId').href="link3.html"
}
</script>
<body onLoad="slide1()">
<a id="aId"><img id="id"></a>
</body>
</html>Dentro de body, vamos criar uma imagem, assim como no exemplo anterior, mas com a diferença de que essa imagem estará dentro de uma tag “a”, que fará com que ela se torne um link. Especifique o id dessa nova tag, para que possa ser citada no código JavaScript, em head. Dentro dela, criei a função “slide1()”, que irá determinar a imagem do slide e o tempo de duração, assim como no exemplo do banner sem link, mas com a diferença da parte do código que especifica um “href” (link) para a tag “a”, que a imagem do banner está inserida. Assim também se verifica no “slide2()” e no “slide3()”, onde retorna ao início do banner.
Criando um slide
Agora você irá ver como criar um slide. Ele terá três opções de imagens, e botões de navegação para retroceder ou avançar.
<html>
<head>
<script type="text/javascript">
array1 = new Array ("1.bmp", "2.bmp", "3.bmp")
function comeco(){
document.getElementById('imgId').src = array1[0]
document.form.texto.value="0"
}
function mais(){
document.form.texto.value = Math.floor (1+ 1 - 2 + (document.form.texto.value) * 1 + 1)
if (document.form.texto.value > 2)
{document.form.texto.value = 0}
}
function menos(){
document.form.texto.value = Math.floor (1+ 1 - 2 + (document.form.texto.value) * 1 -1)
if (document.form.texto.value < 0)
{document.form.texto.value = 2}
}
function regular(){
document.getElementById('imgId').src = array1[document.form.texto.value];
setTimeout("regular()", 1)
}
</script>
<body onLoad="comeco();regular()">
<a id="aId"><img id="imgId"></a>
</br>
<a id="prev" href="javascript:menos()">Anterior</a>.<a id="next" href="javascript:mais()">Próximo</a>
<form name="form">
<input type=text name="texto">
</form>
</body>
</HTML>Em body, criamos uma imagem que servirá de receptáculo para o slide, e criamos os botões de retroceder a avançar. Em head, comecei criando um array com as três imagens com compõem o slide. A função “começo()” irá definir que a primeira imagem do slide será a imagem 0 da array, e irá definir o valor da barra de texto como 0. A função “mais()” irá adicionar uma unidade a barra de texto não deixando passar de dois, e a função “menos()” irá diminuir uma unidade da barra de texto, não deixando passar de zero. Na função “regular()”, será definido que a imagem do slide será o array que estiver representado em uma número (de 0 a 2) na barra de texto, e irá atualizar isso a cada milissegundo. Depois, basta conectar o botão de avançar com a função “mais()” e o botão retroceder com a função “menos()”.
Estudando o código exposto aqui você não terá dificuldades em fazer algumas modificações, como aumentar o número de imagens ou o tempo entre uma e outra. Esse artigo termina aqui, até a próxima.
