编程 Javascript

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

Posted in Javascript onFebruary 24, 2015

本文实例讲述了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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js类中获取外部函数名的方法与代码

Sep 12 Javascript

JS小游戏之宇宙战机源码详解

Sep 25 Javascript

Javascript 赋值机制详解

Nov 23 Javascript

js库Modernizr的介绍和使用

May 07 Javascript

JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

Jun 14 Javascript

js 定义对象数组(结合)多维数组方法

Jul 27 Javascript

hovertree插件实现二级树形菜单（简单实用）

Dec 28 Javascript

浅谈React组件之性能优化

Mar 02 Javascript

详解如何更好的使用module vuex

Mar 27 Javascript

解决vue 使用axios.all()方法发起多个请求控制台报错的问题

Nov 09 Javascript

js回到页面指定位置的三种方式

Dec 17 Javascript

梳理一下vue中的生命周期

Dec 30 Vue.js

javascript感应鼠标图片透明度显示的方法

Feb 24 #Javascript

javascript文本框内输入文字倒计数的方法

Feb 24 #Javascript

jQuery实现感应鼠标动画效果自动伸长的输入框实例

Feb 24 #Javascript

JS实现超过长度限制后自动跳转下一款文本框的方法

Feb 23 #Javascript

js仿土豆网带缩略图的焦点图片切换效果实现方法

Feb 23 #Javascript

JS实现仿中关村论坛评分后弹出提示效果的方法

Feb 23 #Javascript

jQuery+AJAX实现网页无刷新上传

Feb 22 #Javascript