原始程式:
<!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 ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="expires" content="0">
<title>JavaScript幻燈片效果</title>
<樣式類型=“文字/css”>
<!--
正文 { 字體大小:12px;
}
輸入 {
右邊框:#7b9ebd 1px 實心;
右內邊距:2px;
頂部邊框:#7b9ebd 1px 實心;
左內邊距:2px;
字體大小:12px;
過濾器: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
左邊框:#7b9ebd 1px 實心;
遊標:手;
顏色:黑色;
頂部填充:2px;
邊框底部:#7b9ebd 1px 實心;
}
.img {
過濾器:alpha(不透明度= 1,啟用= 1)blendtrans(持續時間= 1);
邊框:1px實心#CCCCCC;
}
-->
</風格>
<腳本語言=“javascript”>
var l = 0;
變數總和=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=新數組();
var _w = 新數組();
var _h = 新數組();
var imgs=new Array();
var limg=new Array();
/* 漸隱漸現 */
函數 transImg(啟用){
document.getElementById("showimg").filters.blendtrans.Apply();
document.getElementById("showimg").filters[0].enabled=啟用;
document.getElementById("showimg").filters.blendtrans.Play();
}
/* 載入圖片 */
function chk(){
l——;
document.getElementById("rotatorPlayer").innerHTML='<img src='+limg[0].src+'><br><br>' + '照片已載入:' + parseInt(((sum-
l)* 100/總和)).toString() + '%'
如果(l==0){
adRotator.play();
document.getElementById('stops').disabled='';
document.getElementById('next').disabled='';
}
}
if (文檔.圖片){
limg[0]=新圖像();
limg[0].src="loading.gif";
for(var i=0;i<13;i++)
{
imgs[i]=新圖像();
imgs[i].src=parseInt(i+1)+".jpg";
}
}
函數 adRotator() {}
函數 adRotator.add(p,w,h)
{
_mycars[_c] = p;
_w[_c] = w;
_h[_c] = h;
_c = _c + 1;
}
/* 播放設定 */
函數 adRotator.loads()
{
if (_i < _mycars.length && _l < 1)
{
_html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img ”>'
如果(_v < 1)
{
document.getElementById('image').value = _html + ',' + _i;
document.getElementById('rotatorPlayer').innerHTML = _html;
反式影像(0);
_i = _i + 1;
document.getElementById('backs').disabled='';
反式影像(1);
反式影像(0);
window.setTimeout("adRotator.loads("+_i+")",_sf);
}
}
別的
{
_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;
反式影像(0);
反式影像(1);
反式影像(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;
}
}
/* 播放 */
函數 adRotator.play()
{
_v = 0;
_l = 0;
adRotator.loads();
}
/* 下一張 */
函數 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();
}
別的
{
document.getElementById('next').disabled='True';
}
}
/* 上一張 */
函數 adRotator.backs()
{
_l = 1;
如果(_i-1 < 0)
{
document.getElementById('backs').disabled='True';
}
別的
{
_i = _i - 1;
document.getElementById('play').disabled='';
document.getElementById('stops').disabled='True';
document.getElementById('next').disabled='';
adRotator.loads();
}
}
/* 間隔時間 */
函數 adRotator.set()
{
var _sfc = document.getElementById('第二').value;
if (isInteger(_sfc))
{
_sf = _sfc * 1000;
}
別的
{
alert('提示:只能輸入數字!');
document.getElementById('第二').value=1;
document.getElementById('第二').select();
}
}
/* 字元檢測 */
函數 isInteger(str)
{
var regu = /^[-]{0,1}[0-9]{1,}$/;
返回 regu.test(str);
}
/* 暫停 */
函數 adRotator.stops()
{
_v = 1;
}
/*新增圖片*/
for (var i=0;i<imgs.length;i++)
{
adRotator.add(imgs[i].src,400,300);
}
</腳本>
</頭>
<內文>
<表寬度=“420”邊框=“0”對齊=“中心”cellpadding=“0”cellspacing=“0”>
<tr>
<td對齊=“中心”>
<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=''" 已禁用=“真實”/>
<input type="button" name="stops" value="暫停" onClick="adRotator.stops();this.disabled='true';document.getElementById
('play').disabled='' "disabled= “真實”/>
<input type="button" name="backs" value="上一張" onClick="adRotator.backs();"禁用=“真”/>
<input type="button" name="next" value="下一張" onClick="adRotator.next();"禁用=“真”/>
<輸入類型=“文字”ID=“第二個”值=“3”大小=“3”最大長度=“2”>
秒
<input type="button" value="設定時間" onClick="adRotator.set()" />
<br><br>
<輸入名稱=“圖像”類型=“文字”大小=“65”/>
</td>
</tr>
</表>
<腳本語言=“javascript”>
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//無論圖片是否載入成功,都執行指定方法
}
</腳本>
</正文>
</html>
http://www.cnblogs.com/PeriFox/archive/2006/08/09/472342.html