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

javascript实现图片循环渐显播放的代码（图片轮播）

2017-06-23 13:13 866 查看

这篇文章主要介绍了javascript实现图片循环渐显播放的方法,涉及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

<html>
<title>
图片的循环渐显播放效果代码
</title>

<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>


<body onLoad="showimage()">

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

</html>
原文地址：http://www.xz-src.com/1973.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航