A seguir, começarei a parte mais importante, que é escrever um programa javascript. Nossa ideia é que possamos definir um grupo de fotos (várias fotos quando a página aparecer, a primeira foto será exibida primeiro e a segunda foto será pré-carregada 5 segundos após o carregamento da primeira foto). A imagem também é carregada e começamos a mudar automaticamente para a segunda imagem. Neste momento, a terceira imagem é pré-carregada. Se carregarmos a terceira imagem em 5 segundos, mudaremos automaticamente para a terceira imagem e a reprodução continuará. até que o último comece do início novamente. Claro, isso é reproduzido automaticamente. Também permitimos que os usuários joguem manualmente para frente e para trás.
Em primeiro lugar, o problema que temos que resolver é o pré-carregamento das imagens, pois isso determina a suavidade do processo de troca e a perfeição do processo de reprodução. É muito simples pré-carregar uma imagem. Basta criar uma nova variável de instância da imagem na memória e apontar a variável para uma imagem. pré-carregamento. Escrito em javascript fica assim:
var myImage = new Image()
myImage.src = "someImage.gif"
Então, também precisamos saber se a imagem está carregada? Se estiver carregado, iremos exibi-lo. Se não estiver carregado, ocorrerá um erro. Portanto, temos que alterar o código acima e adicionar duas instruções, para que esse JavaScript fique assim:
var img = new Image()
img.onload=doReadyImage
img.onerror=doErrorDisplay
img.src = "someImage.gif"
Adicionamos os eventos onload e onerror da imagem, que representam se os eventos de erro devem ser pré-carregados e pré-carregados, respectivamente. Essas duas frases devem estar antes da instrução img.src. Caso contrário, o pré-carregamento da imagem dará errado.
A última etapa é nosso programa de troca de imagens. Anteriormente, revisamos os vários efeitos dos filtros de conversão de filtro em CSS. Aqui usamos o efeito aleatório de codinome 23. Abaixo está o que escrevemos para este efeito no programa JavaScript do IE:
if (document. imagens.slideShow.filtros)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// Use efeito de transição aleatório document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
//Começa a executar o efeito de conversão
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()