JS 相册效果自动播放[本地整合]- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS 相册效果自动播放[本地整合]

技术文章搜索

关键字

Javascript 中的 JS 相册效果自动播放[本地整合]

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 204 ::

收藏到网摘: n/a

鼠标滑过放大显示效果的列表仿CSDN 右下角悬挂的浮动层效果

具有自动播放功能,图片显示不但具有渐隐渐现,自动伸缩的效果,还能像放电影一样的感觉!

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

可控制渐隐渐现：

点击运行可以看到效果:

<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="/upload/tech/20091012/20091012094107_6512bd43d9caa6e02c990b0a82652dca.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("/upload/tech/20091012/20091012094108_9be40cee5b0eee1462c82c6964087ff9.jpg"
,"/upload/tech/20091012/20091012094111_d707329bece455a462b58ce00d1194c9.jpg"
,"/upload/tech/20091012/20091012094114_7f6ffaa6bb0b408017b62254211691b5.jpg"
,"/upload/tech/20091012/20091012094118_26337353b7962f533d78c762373b3318.jpg"
,"/upload/tech/20091012/20091012094122_2f885d0fbe2e131bfc9d98363e55d1d4.jpg"
,"/upload/tech/20091012/20091012094124_6faa8040da20ef399b63a72d0e4ab575.jpg"
,"/upload/tech/20091012/20091012094128_9c838d2e45b2ad1094d42f4ef36764f6.jpg"
,"/upload/tech/20091012/20091012094132_1141938ba2c2b13f5505d7c424ebae5f.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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

鼠标滑过放大显示效果的列表仿CSDN 右下角悬挂的浮动层效果

Javascript 中的 JS 相册效果 自动播放[本地整合]

评论 (0) All

Javascript 中的 JS 相册效果自动播放[本地整合]