Este artigo descreve o método de JavaScript para realizar a exibição gradual da reprodução de imagem. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <html>
<título> O loop de imagem exibe gradualmente o código de efeito de reprodução </ititle>
<head>
<!-1. Insira o seguinte código entre o <head> </head> do Heml: ->
<idioma do script = javascript>
<!-//
Sandra0 = nova imagem ();
Sandra0.src = "/images/m01.jpg";
Sandra1 = nova imagem ();
Sandra1.src = "/images/m02.jpg";
Sandra2 = nova imagem ();
Sandra2.src = "/images/m03.jpg";
var i_strngth = 1
var i_image = 0
var imageUrl = new Array ()
imageurl [0] = "/imagens/m01.jpg"
imageurl [1] = "/imagens/m02.jpg"
imageurl [2] = "/imagens/m03.jpg"
function showImage () {
if (document.all) {
if (i_strngth <= 110) {
testimage.innerhtml = "<img style = 'filtro: alpha (opacity ="+i_strngth+")' src ="+imageurl [i_image]+"borda = 0>";
i_strngth = i_strngth+10
var timer = setTimeout ("showImage ()", 100)
}
outro {
ClearTimeout (temporizador)
var timer = setTimeout ("hideImage ()", 1000)
}
}
if (document.layers) {
ClearTimeout (temporizador)
document.testimage.document.write ("<img src ="+imageurl [i_image]+"borda = 0>")
document.close ()
i_image ++
if (i_image> = imageurl.length) {i_image = 0}
var timer = setTimeout ("showImage ()", 2000)
}
}
função hideImage () {
if (i_strngth> =-10) {
testimage.innerhtml = "<img style = 'filtro: alpha (opacity ="+i_strngth+")' src ="+imageurl [i_image]+"borda = 0>";
i_strngth = i_strngth-10
var timer = setTimeout ("hideImage ()", 100)
}
outro {
ClearTimeout (temporizador)
i_image ++
if (i_image> = imageurl.length) {i_image = 0}
i_strngth = 1
var timer = setTimeout ("showImage ()", 500)
}
}
//->
</script>
</head>
<Body>
<!-2. Modifique a declaração <mody> para:->
<corpo onload = "showImage ()">
<!-3. Adicione o seguinte código ao <body> </body> de Heml: topo: 120px; Esquerda: 240px pode definir a posição de exibição->
<div id = "testimage" style = "Posição: absoluto; visibilidade: visível; topo: 120px; esquerda: 240px"> </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.