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 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
AngularJS Controller作用域
Jan 09 Javascript
js判断是否是手机页面
Mar 17 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 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工厂模式的好处
2013/06/18 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
详解a++和++a的区别
2017/08/30 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
Python操作MongoDB详解及实例
2017/05/18 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python 切分数组实例解析
2019/11/07 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
python上selenium的弹框操作实现
2020/07/13 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
庆元旦广播稿
2014/02/10 职场文书
新教师工作感言
2014/02/16 职场文书
党员志愿者活动方案
2014/08/28 职场文书
创优争先心得体会
2014/09/11 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server