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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
js实现简单数字变动效果
Nov 06 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
js实现自动锁屏功能
Jun 02 Javascript
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的FTP学习(一)
2006/10/09 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
jquery实现的网页自动播放声音
2014/04/30 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
基于js 本地存储(详解)
2017/08/16 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python入门学习指南分享
2018/04/11 Python
简单谈谈python基本数据类型
2018/09/26 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
新闻传媒系求职信范文
2014/04/19 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
瘦西湖导游词
2015/02/03 职场文书
小学元宵节活动总结
2015/02/06 职场文书
目标责任书格式范文
2015/05/11 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers