Este artículo describe el método de JavaScript para realizar la visualización gradual de reproducción de imágenes. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<title> El bucle de la imagen muestra gradualmente el código de efecto de reproducción </title>
<Evista>
<!-1. Inserte el siguiente código entre el <fead> </head> del heml: ->
<Script Language = JavaScript>
<!-//
sandra0 = nueva imagen ();
sandra0.src = "/images/m01.jpg";
sandra1 = nueva imagen ();
sandra1.src = "/images/m02.jpg";
sandra2 = nueva imagen ();
sandra2.src = "/images/m03.jpg";
var i_strngth = 1
var i_image = 0
var imageUrl = new Array ()
imageUrl [0] = "/images/m01.jpg"
ImageUrl [1] = "/imágenes/m02.jpg"
imageUrl [2] = "/images/m03.jpg"
función showImage () {
if (document.all) {
if (i_strngth <= 110) {
testimage.innerhtml = "<img style = 'filtre: alfa (opacity ="+i_strngth+")' src ="+imageUrl [i_image]+"border = 0>";
i_strngth = i_strngth+10
VAR TIMER = SetTimeOut ("showImage ()", 100)
}
demás {
ClearTimeOut (temporizador)
VAR TIMER = SetTimeOut ("HideImage ()", 1000)
}
}
if (document.layers) {
ClearTimeOut (temporizador)
document.testimage.document.write ("<img src ="+imageUrl [i_image]+"border = 0>")
document.close ()
i_image ++
if (i_image> = imageUrl.length) {i_image = 0}
VAR TIMER = SetTimeOut ("showImage ()", 2000)
}
}
función hideImage () {
if (i_strngth> =-10) {
testimage.innerhtml = "<img style = 'filtre: alfa (opacity ="+i_strngth+")' src ="+imageUrl [i_image]+"border = 0>";
i_strngth = i_strngth-10
VAR TIMER = SetTimeOut ("HideImage ()", 100)
}
demás {
ClearTimeOut (temporizador)
i_image ++
if (i_image> = imageUrl.length) {i_image = 0}
i_strngth = 1
VAR TIMER = SetTimeOut ("showImage ()", 500)
}
}
//->
</script>
</ablo>
<Body>
<!-2. Modifique la instrucción <Body> a:->
<Body onload = "showImage ()">
<!-3. Agregue el siguiente código al <body> </body> de Heml: Top: 120px; Izquierda: 240px puede establecer la posición de visualización->
<div id = "testimage" style = "Posición: Absolute; Visibilidad: Visible; Top: 120px; Izquierda: 240px"> </div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.