JavaScript幻燈片效果

2024-04-27 13:55:50

字體：大中小

來源：轉載

供稿：網友

源程序：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="expires" content="0">
<title>javaScript幻燈片效果</title>
<style type="text/CSS">

</style>
<script language="Javascript">
var l=0;
var sum=0;
var _c = 0;
var _i = 0;
var _v = 0;
var _l = 0;
var _fi = 0;
var _sf = 3000;
var _html = null;
var _image = null;
var _mycars= new Array();
var _w = new Array();
var _h = new Array();
var imgs=new Array();
var limg=new Array();

/* 漸隱漸現 */
function transImg(enable){
document.getElementById("showimg").filters.blendtrans.Apply();
document.getElementById("showimg").filters[0].enabled=enable;
document.getElementById("showimg").filters.blendtrans.Play();
}

/* 加載圖片 */

function chk(){
l--;
document.getElementById("rotatorPlayer").innerHTML='<img src='+limg[0].src+'><br><br>' + '照片已加載：' + parseInt(((sum-

l)*100/sum)).toString() + '%'
if (l==0){
      adRotator.play();
   document.getElementById('stops').disabled='';
   document.getElementById('next').disabled='';
}
}

if (document.images){
limg[0]=new Image();
limg[0].src="loading.gif";
for(var i=0;i<13;i++)
{
imgs[i]=new Image();
imgs[i].src=parseInt(i+1)+".jpg";
}
}

function adRotator() {}

function adRotator.add(p,w,h)
{
   _mycars[_c] = p;
   _w[_c] = w;
   _h[_c] = h;
   _c = _c + 1;
}

/* 播放設置 */
function adRotator.loads()
{
   if (_i < _mycars.length && _l < 1)
   {
     _html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
     if (_v < 1)
     {
        document.getElementById('image').value = _html + ',' + _i;
        document.getElementById('rotatorPlayer').innerHTML = _html;
transImg(0);
        _i = _i + 1;
document.getElementById('backs').disabled='';
transImg(1);
transImg(0);
        window.setTimeout("adRotator.loads("+_i+")",_sf);
     }
   }
   else
   {
     _html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
document.getElementById('image').value = _html + ',' + _i;
     document.getElementById('rotatorPlayer').innerHTML = _html;
transImg(0);
transImg(1);
transImg(0);
   }
   if (_i+1 > _mycars.length)
   {
      document.getElementById('stops').disabled='True';
   document.getElementById('play').disabled='';
   document.getElementById('backs').disabled='';
   document.getElementById('next').disabled='True';
   _i = 0;
   _v = 1;
   }
}

/* 播放 */
function adRotator.play()
{
   _v = 0;
   _l = 0;
   adRotator.loads();
}

/* 下一張 */
function adRotator.next()
{
   _l = 1;
   if(_i+1 < _mycars.length)
   {
      _i = _i + 1;
   document.getElementById('play').disabled='';
   document.getElementById('stops').disabled='True';
   document.getElementById('backs').disabled='';
   adRotator.loads();
   }
   else
   {
      document.getElementById('next').disabled='True';
   }
}

/* 上一張 */
function adRotator.backs()
{
   _l = 1;
   if(_i-1 < 0)
   {
      document.getElementById('backs').disabled='True';
   }
   else
   {
      _i = _i - 1;
   document.getElementById('play').disabled='';
   document.getElementById('stops').disabled='True';
   document.getElementById('next').disabled='';
   adRotator.loads();
   }
}

/* 間隔時間 */
function adRotator.set()
{
   var _sfc = document.getElementById('second').value;
   if (isInteger(_sfc))
   {
     _sf = _sfc * 1000;
   }
   else
   {
     alert('提示：只能輸入數字！');
     document.getElementById('second').value=1;
     document.getElementById('second').select();
   }
}

/* 字符檢測 */
function isInteger(str)
{
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}

/* 暫停 */
function adRotator.stops()
{
_v = 1;
}

/* 添加圖片 */
for (var i=0;i<imgs.length;i++)
{
adRotator.add(imgs[i].src,400,300);
}

</script>
</head>

<body>
<table width="420" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div id="rotatorPlayer" style="text-align:center"><img src="loading.gif"><br><br>照片已加載：0%</div>
<br><br>
<input type="button" name="play" value="開始播放" onClick="adRotator.play();this.disabled='true';document.getElementById

('stops').disabled=''" disabled="True"/>
<input type="button" name="stops" value="暫停" onClick="adRotator.stops();this.disabled='true';document.getElementById

('play').disabled=''" disabled="True"/>
<input type="button" name="backs" value="上一張" onClick="adRotator.backs();" disabled="True"/>
<input type="button" name="next" value="下一張" onClick="adRotator.next();" disabled="True"/>   
<input type="text" id="second" value="3" size="3" maxlength="2">
秒
<input type="button" value="設置時間" onClick="adRotator.set()" />
<br><br>
<input name="image" type="text" size="65"/>
</td>
</tr>
</table>
<script language="javascript">
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//無論圖片是否加載成功，都執行指定方法
}
</script>
</body>
</html>