Slideshow com efeitos de transição usando JavaScript

Voce já viu em alguns sites uma apresentação de slides criado com javascript onde podemos ter controle total sobre ele, como avançar, pausar, ou parar os slide usando botões, pois vamos aprender como criar um agora, este tutorial vai ficar bem grande porque vai ser muito detalhado para que todos possam entender bem como o codigo foi feito, então paciencia pessoal.

Para podermos criar uma apresentação de slides em javascript, temos que primeiro criar os elementos HTML que iremos utilizar para o slideshow. Precisamos de uma imagem, quatro botões e duas divs:

<html>
<body onload="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="1.jpg" /></div><br />
<input id="prev" type="button" value="prev" onclick="prev()" />
<input id="next" type="button" value="next" onclick="next()" />
<input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
<input id="pause" type="button" value="pause" onclick="pause()" /><br />
<div id="number">Picture 1</div>
</center>
</body>
</html>

Vamos usar a tag img para exibir as imagens na apresentação. A imagem é acondicionada dentro de uma div, que tem um filtro de atributo CSS. Esse filtro irá criar o efeito de transição usando o DirectX. Temos também quatro botões para controlar a apresentação e outra div que vai exibir o texto (como o título da imagem).

Vamos passar para o script. Primeiro, vamos declarar algumas variáveis e fazer uma função que pré-carrega as fotos.

<script language="javascript" type="text/javascript">
<!--
var i=0;
var finished=false;
var paused=false;
var running=false;

function loadPics()
{
pic0=new Image();
pic0.src="1.jpg";
pic1=new Image();
pic1.src="2.jpg";
pic2=new Image();
pic2.src="3.jpg";
pic3=new Image();
pic3.src="4.jpg";
pict=new Array();
pict[0]=pic0.src;
pict[1]=pic1.src;
pict[2]=pic2.src;
pict[3]=pic3.src;
}

Esta função de pré-carrega as imagens e faz uma matriz com elas. Queremos que esta função a ser chamada quando carrega páginas, por isso o corpo tem a marca do evento: onload = "loadPics ()".

Agora, vamos escrever uma função para o botão Avançar. A imagem padrão é pict0 (1.jpg), então o que nós queremos é a imagem para exibir a imagem seguinte, quando clicar em Avançar, e para mostrar a primeira imagem se estamos no final da apresentação. Para esta função vamos usar a variável i, que é basicamente o quadro atual, e uma instrução IF ELSE.

function next()
{
finished=false;

if(iAvançar, ele verifica qual imagem é exibida no momento, se a imagem é outra senão a última, que será incrementado por 1, a próxima foto será exibida e as fotos ' nome será escrito em uma div. Se a última imagem foi exibida quando o botão foi clicado, me retornarei a 0, e a primeira imagem será exibida novamente.

A função anterior é praticamente a mesma. A diferença é que o IF ELSE verifica se o quadro atual é o primeiro. Se o quadro atual não é a primeira imagem, então a imagem anterior, será exibida, se é a primeira foto, a última imagem na apresentação de slides será apresentada.

function prev()
{
finished=false;
if (i>0)
{
i--;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=pict.length-1;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}

O AutoSlideshow é o próximo. Primeiro vamos criar uma função que irá chamar a função slideshow atual em um certo intervalo. Também, porque a transição não funciona no Firefox, nós vamos ter que verificar o browser para ver qual função chamar (há uma para o IE, e outra para o resto do navegadores).

function startSlide()
{
running=true;
if(navigator.appVersion.indexOf("MSIE") == -1)
{
interval = setInterval(FFSlideshow,5000);
}
else
{
interval = setInterval(slideshow,5000);
}
document.getElementById("slideshow").disabled=true;
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}

A variável que mostra a execução de diapositivos está em andamento, e que será útil para a função de pausa do slideshow.

Assim, se o navegador é o IE, a função de apresentação de slides será chamada após 5 segundos, se não, a função FFSlideshow será chamado.

function slideshow()
{
if

(i i será incrementado por 1, e a função startSlide irá chamar esta função novamente depois de 5 segundos. Isto vai continuar até que a última imagem seja exibida, em seguida, o cronômetro será zerado e a função não será chamada novamente, acabou se tornará verdadeira e execução se tornará falsa. Se a apresentação for iniciado novamente, o quadro atual será o último e terminou não será falso, então o código no corpo da pessoa estará correndo; o Show vai continuar até chegar a última foto de novo: o temporizador vai chamar essa função até que ele foi inocentado novamente. Eu usei setInterval () em vez de setTimeout () porque ele possa ser limpo, e isso impedirá a apresentação de correr mais do que o desejado (se você usar setTimeout e pausar a apresentação duas vezes durante a mesma foto, a apresentação será executada duas vezes).

A função FFSlideshow é a mesma, exceto aquila que não têm filtros (que faz com que o Firefox não execute o script).

function FFSlideshow()
{
if

(ipausa. Nós não queremos fazer uma pausa na apresentação de slides quando ele não está funcionando mesmo. Portanto, temos a variável execução supra, que nos ajuda a saber se o slide está em execução ou não. Queremos também retomar a apresentação depois de ter sido interrompida, por isso chamamos de pausa variável acima.

function pause()
{
if(running==true)
{
if(paused==false)
{
paused=true;
document.getElementById("pause").value="resume";
clearInterval(interval);
document.getElementById('number').innerHTML="Paused";
}
else
{
startSlide()
paused=false;
document.getElementById("pause").value="pause";
}
}
}

Quando o botão de pausa foi clicado a função verifica se está executando uma apresentação de slides. Se não for, então a função não fará nada. Se uma apresentação está rodando, ele verifica se ele foi pausado ou não. Se ele não foi pausada, a função irá fazer uma pausa na apresentação de slides, limpando o setInterval. O botão vai dizer "retomar" agora e uma div vai dizer "pausa". A pausa variável agora é verdadeira. Assim, quando a função é chamada novamente, ele irá executar o outro pedaço do código: ele vai chamar o startSlide () (função que irá iniciar um temporizador e chamar a função de apresentação de slides), fará com que o botão de dizer "pausa" de novo e de pausa variável voltará a ser falsa.

E não se esqueça de fechar o script: