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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
js 调整select 位置的函数
Feb 21 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python zip()函数的使用示例
2020/09/23 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
机关门卫制度
2014/02/01 职场文书
《长相思》听课反思
2014/04/10 职场文书
路政管理求职信
2014/06/18 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书