<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> <img width="70" height="70" src="http://img.jb51.net/online/slide/011.jpg" alt="" /> <img width="70" height="70" src="http://img.jb51.net/online/slide/021.jpg" alt="" /> <img width="70" height="70" src="http://img.jb51.net/online/slide/03.jpg" alt="" /> <img width="70" height="70" src="http://img.jb51.net/online/slide/061.jpg" alt="" /> <img width="70" height="70" src="http://img.jb51.net/online/slide/051.jpg" alt="" /></center> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 可控制渐隐渐现： <html> <body> <button onclick="prevPhoto（）">Previous</button> <button onclick="nextPhoto（）">Next</button> <button onclick="autoPlay（）" id="pp">Play</button> <button onclick="stopPlay（）">Stop</button><img src="http://img.jb51.net/online/slide/jb51.gif" id="photo" style=""> </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需刷新才能执行]
易网时代-编程资源站
易网时代-编程资源站