javascript实现图片循环渐显播放的方法

前端技术 2023/09/08 JavaScript

本文实例讲述了javascript实现图片循环渐显播放的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:
<html>
<title>图片的循环渐显播放效果代码</title>
<head>
<!--1、将下面的代码插入到HEML的<head></head>之间： -->
<script language=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\"
function 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=setTimeout(\"showimage()\",100)
}
else {
clearTimeout(timer)
var timer=setTimeout(\"hideimage()\",1000)
}
}
if(document.layers) {
clearTimeout(timer)
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)
}
}
function 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=setTimeout(\"hideimage()\",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout(\"showimage()\",500)
}
}
//-->
</script>
</head>
<body>
<!--2、修改<body>语句为：-->

<body onLoad=\"showimage()\">

<!--3、将下面的代码加入到HEML的<body></body>之间：top:120px;left:240px可以设定显示的位置-->

<div id=\"testimage\" style=\"position:absolute;visibility:visible;top:120px;left:240px\"></div>
</body>
</html>

本文地址：https://www.stayed.cn/item/22703

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案