您的位置：首页 > Web前端 > JavaScript

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

2015-02-24 00:00 661 查看
本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航