Programa de apresentação de slides DHTML (1)

Autor：Eve Cole Data da Última Atualização：2009-06-20 17:00:35

Este é um programa de apresentação de slides, que reproduz imagens por vez. Podemos observar esta forma de publicidade de barras de reprodução em alguns sites, a maioria deles feitos com CGI, o que significa que o servidor deve suportar programas CGI, como ASP, PHP, Perl, etc. Mas nosso método de implementação aqui não requer CGI, ele usa apenas efeitos CSS, além de controle de JavaScripts. Desde que seu navegador seja IE 4.0 ou superior ou Netscape 3.0 ou superior. Só que aqui usamos o efeito CSS Filter, que só pode aparecer no IE. Para obter informações sobre os efeitos de filtro do CSS, você pode consultar minha "Explicação detalhada de filtros em CSS", que foi publicada em Yesky.com.
Ok, vamos fazer alguns preparativos.

Em primeiro lugar, para criar este efeito, primeiro precisamos fazer várias imagens do mesmo tamanho e deixá-las tocar uma a uma. Por exemplo, encontrei as seguintes três fotos 88x31 como imagens usadas.

Em segundo lugar, vamos revisar o conhecimento do filtro de conversão de imagem do Filter em CSS:

Exibir filtro de transformação em CSS

O filtro de transformação de exibição fornece um efeito de transformação mais variado. Ao contrário do filtro de transformação híbrido, que fornece apenas um efeito de aumento e diminuição gradual, ele também fornece mais efeitos de transformação de imagem.

Filtro: RevealTrans (duração = número de segundos para converter, transição = tipo de conversão)

Como você pode ver, ele possui um parâmetro de tipo de conversão. Aqui, ele fornece 24 tipos de conversão. Precisamos apenas especificar o nome do código do tipo de conversão para converter a imagem de acordo com o efeito de conversão exclusivo. A tabela a seguir mostra os 24 formulários de filtro de conversão e seus códigos correspondentes:
Exiba o código forma de conversão do filtro de conversão

o código correspondente à	forma de conversão do filtro de conversão	Exiba	correspondente à
Retângulo de grande para pequeno	0	dissolva aleatoriamente	12
retângulo de pequeno para	grande 1	dividido verticalmente para dentro	13
círculo de grande para pequeno.	2	Vertical Dividir para fora	14
Redondo Pequeno a grande	3	Dividir horizontalmente para dentro	15
Empurrar para cima	4	Dividir horizontalmente para fora	16
Empurrar para baixo	5	Descascar para a esquerda e para baixo	17
Empurrar para a direita	6	Descascar para cima à esquerda	18
Empurrar para a esquerda Abrir	7	Descascar para a direita	19
Cortinas verticais	8	Descascar para cima e para a direita	20
Persianas horizontais	9	Linhas finas horizontais aleatórias	21
Tabuleiro de xadrez horizontal	10	Linhas finas verticais aleatórias	22
Tabuleiro de damas vertical	11	Selecione aleatoriamente um efeito especial	23