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程序设计有所帮助。

Javascript 相关文章推荐
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
bootstrap css样式之表单
Jan 19 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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
You might like
php.ini 中文版
2006/10/28 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
vuex实现简易计数器
2016/10/27 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python yield 小结和实例
2014/04/25 Python
python实现京东秒杀功能
2018/07/30 Python
python同步两个文件夹下的内容
2019/08/29 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Python 远程开关机的方法
2020/11/18 Python
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
营销总经理岗位职责
2014/02/02 职场文书
企业内部培训方案
2014/02/04 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
三好学生评语大全
2014/12/29 职场文书
考研英语复习计划
2015/01/19 职场文书
党员转正党支部意见
2015/06/02 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书