关注公众号 jb51net

关闭

首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > JS 相册

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

2008-12-16 13:20:36 作者：

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

<script type="text/javascript" src="http://img.jb51.net/online/slide/slide.js"></script> 
<script defer="defer" type="text/javascript"> 
</script> 
<style type="text/css"> 
 
</style> 
<center> 
<div class="Slideshow"> 
<a href="http://img.jb51.net/online/slide/011.jpg" onclick="return viewer.show(0)"> 
<img width="70" height="70" src="http://img.jb51.net/online/slide/011.jpg" alt="" /> </a> 
<a href="http://img.jb51.net/online/slide/021.jpg" onclick="return viewer.show(1)"> 
<img width="70" height="70" src="http://img.jb51.net/online/slide/021.jpg" alt="" /> </a> 
<a href="http://img.jb51.net/online/slide/03.jpg" onclick="return viewer.show(2)"> 
<img width="70" height="70" src="http://img.jb51.net/online/slide/03.jpg" alt="" /> </a> 
<a href="http://img.jb51.net/online/slide/061.jpg" onclick="return viewer.show(3)"> 
<img width="70" height="70" src="http://img.jb51.net/online/slide/061.jpg" alt="" /> </a> 
<a href="http://img.jb51.net/online/slide/051.jpg" onclick="return viewer.show(4)"> 
<img width="70" height="70" src="http://img.jb51.net/online/slide/051.jpg" alt="" /> </a>

</div> 
</center>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

可控制渐隐渐现：

<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章: