<html>
<body>
<div id="testMessage" style="border:2px solid skyblue;width:300px;height:60px"></div>
<div id="photoContrl" style="display:none">
<button onclick="prevPhoto()">Previous</button>
<button onclick="nextPhoto()">Next</button>
<button onclick="autoPlay()" id="pp">Play</button>
<button onclick="stopPlay()">Stop</button>
</div>
<div style="border:1px solid gold;width:600px;background:dodgerblue"><img src="http://img.jb51.net/online/slide/jb51.gif" id="photo" style=""></div>
</body>
</html>
<script>
function tM(Message)
{
$("testMessage").innerHTML=Message
}
function dR(topr)
{
document.write(topr)
}
function $(eleId)
{return document.getElementById(eleId)}
//预载图片
var imasrc=new Array("http://img.jb51.net/online/slide/10254068.jpg"
,"http://img.jb51.net/online/slide/10254629.jpg"
,"http://img.jb51.net/online/slide/10255187.jpg"
,"http://img.jb51.net/online/slide/10255626.jpg"
,"http://img.jb51.net/online/slide/10260076.jpg"
,"http://img.jb51.net/online/slide/10260471.jpg"
,"http://img.jb51.net/online/slide/10261022.jpg"
,"http://img.jb51.net/online/slide/10261479.jpg")//图片路径写入数组
var preIma=new Array()
var dB=new Date()
for (i=0;i < imasrc.length;i++)//预载所有图片
{
preLoadImg(i)
}
function preLoadImg(imgIndex)//预载指定图片图片
{
preIma[imgIndex]=new Image()
preIma[imgIndex].imgReadyStatus=false
preIma[imgIndex].imgIndex=imgIndex
preIma[imgIndex].onload=imgLoad
preIma[imgIndex].onerror=imgError
preIma[imgIndex].onabort=imgAbort
preIma[imgIndex].src=imasrc[imgIndex]
}
function imgLoad()//预载完成
{
this.imgReadyStatus=true
}
function imgError()//预载失败
{
preLoadImg(this.imgIndex)
}
function imgAbort()//预载取消
{
preIma.splice(this.imgIndex,1)
}
var checkAgain
function checkImgReadyStatus()//检索加载状态
{
var imgReadyStatus=true
var persent=0
var dE=new Date()
for (i=0;i < preIma.length;i++)
{
if (!preIma[i].imgReadyStatus)
{imgReadyStatus=false}
else
{persent++}
}
tM("完成:"+(persent/preIma.length*100).toFixed(2)+"%<br>载入:"+persent+"张图片<br>消耗时间:"+((dE-dB)/1000).toFixed(0)+"秒")//显示进度
if (imgReadyStatus)
{
$("photoContrl").style.display="block"
autoPlay()
clearTimeout(checkAgain)
}
else
{
checkAgain=setTimeout(checkImgReadyStatus,1000)//检索频率
}
}
checkImgReadyStatus()
//幻灯片效果
var photoIndex=0//初始化图片索引
var opacity=10//初始化透明度
var direct="--"//初始化透明度矢量
var doPlay//定义播放
var doAutoPlay//定义自动播放
function prevPhoto(){play(-1)}//前翻
function nextPhoto(){play(1)}//后翻
function autoPlay()//自动播放
{
if (doAutoPlay)
{
clearInterval(doAutoPlay)
doAutoPlay=null
$("pp").innerHTML="Play"
}
else
{
play(1)
doAutoPlay=setInterval("play(1)",3000)//定义自动播放频率
$("pp").innerHTML="Pause"
}
}
function stopPlay()//停止播放
{
clearInterval(doAutoPlay)
doAutoPlay=null
photoIndex=0
play(0)
$("pp").innerHTML="Play"
}
function play(act)//执行动作
{
if (preIma.length!=0)
{
if (doPlay) {clearInterval(doPlay)}
doPlay=setInterval(switchPhoto,10)
photoIndex=(photoIndex+act+preIma.length)%preIma.length
}
}
function switchPhoto()//切换照片
{
eval("opacity"+direct)
setOpa(opacity)
if (opacity <= 1)
{
direct="++"
$("photo").src=preIma[photoIndex].src
}
else if (opacity >= 10)
{
direct="--"
clearInterval(doPlay)
}
}
function setOpa(opacity)//改变透明度
{
if ($("photo").style.filter!=null)
{$("photo").style.filter="alpha(opacity="+opacity*10+")"}
else
{$("photo").style.opacity=opacity/10}
}
</script>
分享到:
相关推荐
装载机技术比武方案.doc
铁路货物装载技术条件PPT课件.pptx
装载优化是一种谋求最优化资源利用的系统。...● 装载优化的诞生掀起了运输业(货物装载)的一场革命,它利用先进的算法(遗传算法、人工智能)和三维模拟仿真技术,真实并快捷的解决了目前装载工具利用率低的现状。
半导体封装载板技术的现状及展望.pdf
装载机技术比武理论考试题库.pdf
提出国内首套50 t煤矿立井装载用板式定量输送机装载的方案,并对工艺流程和整机结构、链轮链条等关键部件可靠性,称重元件配置和计量精度,变频驱动智能调速控制等关键技术进行研究。研究表明,板式定量输送机装载速度...
很多的时候,我们希望把程序下载到外部的flash,分散装载技术能帮你的忙
最优装载问题——回溯法 最优装载问题——回溯法 最优装载问题——回溯法
装载机是土方施工工程中十分常见的工程机械之一,对该机种的研究所涉及的领域涵盖了数学、力学、机械、液压、电子、计算机、现代控制理论和技术等许多方面;装载机工作装置的主要功用是铲装物料,其中动臂是最主要...
可以在MFC的窗口界面装载图片的Picture头文件
计算计算法设计与分析实验,最优装载问题 c++
仅为示例程序,只有装载图片功能,供学习者参考
装载图片,复制图片,清除图像,VB6.0,GUI源代码
对较薄煤层采煤机装煤效果的影响因素和现有辅助装载的挡煤板的结构进行了分析,介绍了现有薄煤层采煤机辅助装载技术。为更好地实现大功率化较薄煤层采煤机的适应性、可靠性与通用性,提出了一种解决较薄煤层采煤机装载...
掘进机装载机构的性能好坏对装载效率、机械使用寿命有较大影响。针对目前装载机构在结构复杂、故障率高、元件要求高等方面的问题,提出低速大扭矩马达与星轮结合使用的新型装载机构。对液压系统和星轮尺寸、转速以及...
吊车、装载机吊装作业安全技术措施.docx
最优装载问题的回溯算法,用回溯法解决装载问题的c++算法。
先对装载机的发展概况几设计的指导思想、特点、任务进行概述,然后确定方案,在技术设计部分罗列了ZL50装载机的主要技术性能和参数,进行了牵引特性计算,工作装置设计。工作装置设计中有工作装置运动分析,对铲斗、...
mfc 关于(CCOMBOX)下拉框装载图片源码下载 内有使用介绍.txt
其中,棚车(有侧墙、端墙和顶墙)装载成件包装货物(通常带有包装,成件运输和保管的货物)最具代表性,但由于棚车车门在车辆一侧的中间,同时为了保障在装载过程中不偏重和偏载,货物需要从两端向中间装载。...