この記事では、画像再生の段階的な表示を実現するためのJavaScriptの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<Title>画像ループには、再生効果コード</title>が徐々に表示されます
<head>
<！ - 1。 hemlの<head> </head>の間に次のコードを挿入します： - >
<スクリプト言語= javascript>
<！ - //
sandra0 = new Image（）;
sandra0.src = "/images/m01.jpg";
Sandra1 = new Image（）;
sandra1.src = "/images/m02.jpg";
sandra2 = new Image（）;
sandra2.src = "/images/m03.jpg";
var i_strngth = 1
var i_image = 0
var imageurl = new array（）
ImageUrl [0] = "/images/m01.jpg"
ImageUrl [1] = "/images/m02.jpg"
Imageurl [2] = "/images/m03.jpg"
関数showimage（）{
if（document.all）{
if（i_strngth <= 110）{
testimage.innerhtml = "<img style = 'filter：alpha（opacity ="+i_strngth+"）' src ="+imageurl [i_image]+"border = 0>";
i_strngth = i_strngth+10
var timer = setimeout（ "showimage（）"、100）
}
それ以外 {
ClearTimeout（タイマー）
var timer = setimeout（ "hideimage（）"、1000）
}
}
if（document.layers）{
ClearTimeout（タイマー）
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 = setimeout（ "Showimage（）"、2000）
}
}
関数hideimage（）{
if（i_strngth> = -10）{
testimage.innerhtml = "<img style = 'filter：alpha（opacity ="+i_strngth+"）' src ="+imageurl [i_image]+"border = 0>";
i_strngth = i_strngth-10
var timer = setimeout（ "hideimage（）"、100）
}
それ以外 {
ClearTimeout（タイマー）
i_image ++
if（i_image> = imageurl.length）{i_image = 0}
i_strngth = 1
var timer = setimeout（ "showimage（）"、500）
}
}
//->
</script>
</head>
<body>
<！ - 2。 <body>ステートメントを次のように変更します。->
<body onload = "showimage（）">
<！ - 3。次のコードをhemlの<body> </body>に追加します：Top：120px;左：240pxは表示位置を設定できます - >
<div id = "testimage" style = "position：aspolute; visibility：visible; top：120px;左：240px"> </div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。