JavaScript圖片幻燈片代碼

2024-09-05 12:21:12

字體：大中小

供稿：網(wǎng)友

很常見的一款基于JS的圖片幻燈片切換特效，與其它幻燈片不同之處是這款代碼帶有漸變效果，給人的感覺很舒服，像一個(gè)相冊(cè)播放器一樣，你只用將圖片按順序命名存放到指定目錄，它會(huì)自動(dòng)檢測(cè)并播放。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><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='http://www.aspku.com+limg[0].src+'><br><br>'%20+%20'照片已加載：'%20+%20parseInt(((sum-l)*100/sum)).toString()%20+%20'%'%20%20if%20(l==0){%20%20%20%20%20%20adRotator.play();%20%20%20document.getElementById('stops').disabled='';%20%20%20document.getElementById('next').disabled='';%20%20}}if%20(document.images){%20%20limg[0]=new%20Image();%20%20limg[0].src="/jscss/demoimg/loading.gif";  for(var i=0;i<10;i++)  {    imgs[i]=new Image(); imgs[i].src="/jscss/demoimg/wall"+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="http://www.aspku.com'%20+%20_mycars[_i]%20+%20'"%20width="'%20+%20_w[_i]%20+%20'"%20height="'%20+%20_h[_i]%20+%20'"%20class="img">'%20%20document.getElementById('image').value%20=%20_html%20+%20','%20+%20_i;%20%20%20%20%20document.getElementById('rotatorPlayer').innerHTML%20=%20_html;%20%20transImg(0);%20%20transImg(1);%20%20transImg(0);%20%20%20}%20%20%20if%20(_i+1%20>%20_mycars.length)%20%20%20{%20%20%20%20%20%20document.getElementById('stops').disabled='True';%20%20%20document.getElementById('play').disabled='';%20%20%20document.getElementById('backs').disabled='';%20%20%20document.getElementById('next').disabled='True';%20%20%20_i%20=%200;%20%20%20_v%20=%201;%20%20%20}}/*%20播放%20*/function%20%20adRotator.play(){%20%20%20_v%20=%200;%20%20%20_l%20=%200;%20%20%20adRotator.loads();}/*%20下一張%20*/function%20adRotator.next(){%20%20%20_l%20=%201;%20%20%20if(_i+1%20<%20_mycars.length)%20%20%20{%20%20%20%20%20%20_i%20=%20_i%20+%201;%20%20%20document.getElementById('play').disabled='';%20%20%20document.getElementById('stops').disabled='True';%20%20%20document.getElementById('backs').disabled='';%20%20%20adRotator.loads();%20%20%20}%20%20%20else%20%20%20{%20%20%20%20%20%20document.getElementById('next').disabled='True';%20%20%20}}/*%20上一張%20*/function%20adRotator.backs(){%20%20%20_l%20=%201;%20%20%20if(_i-1%20<%200)%20%20%20{%20%20%20%20%20%20document.getElementById('backs').disabled='True';%20%20%20}%20%20%20else%20%20%20{%20%20%20%20%20%20_i%20=%20_i%20-%201;%20%20%20document.getElementById('play').disabled='';%20%20%20document.getElementById('stops').disabled='True';%20%20%20document.getElementById('next').disabled='';%20%20%20adRotator.loads();%20%20%20}}/*%20間隔時(shí)間%20*/function%20adRotator.set(){%20%20%20var%20_sfc%20=%20document.getElementById('second').value;%20%20%20if%20(isInteger(_sfc))%20%20%20{%20%20%20%20%20_sf%20=%20_sfc%20*%201000;%20%20%20}%20%20%20else%20%20%20{%20%20%20%20%20alert('只能輸入數(shù)字！');%20%20%20%20%20document.getElementById('second').value=1;%20%20%20%20%20document.getElementById('second').select();%20%20%20}}/*%20字符檢測(cè)%20*/function%20isInteger(str){%20%20%20%20var%20regu%20=%20/^[-]{0,1}[0-9]{1,}$/;%20%20return%20regu.test(str);}/*%20暫停%20*/function%20adRotator.stops(){%20%20%20_v%20=%201;}/*%20添加圖片%20*/for%20(var%20i=0;i<imgs.length;i++){%20%20%20adRotator.add(imgs[i].src,400,300);}</script></head><body><table%20width="420"%20border="0"%20align="center"%20cellpadding="0"%20cellspacing="0">%20%20<tr>%20%20%20%20<td%20align="center"><div%20id="rotatorPlayer"%20style="text-align:center"><img%20src="/jscss/demoimg/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="配置時(shí)間" 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;//無論圖片是否加載成功，都執(zhí)行指定方法}</script></body></html>

上一篇：鼠標(biāo)移上改變圖片透明度的CSS代碼

下一篇：鼠標(biāo)移上圖片滑出文字提示