刚写的Picture Player 图片播放器

功能还不是很全， 以后再慢慢完善。 ^_^
值得一提的是，图片加载的状态IE和Firefox是不同的，具体看下面代码：

/*****************************************************************/
/**** 類名稱: PicturePlayer(圖片播放器 ****************************/
/**** 作  者: Leonny& nbsp;(Leonny.com@gmail.com) **********************/
/**** 創  建:  2007/06/28 *****************************************/
/**** 更  新:  2007/06/29 *****************************************/
/*****************************************************************/
/**** 參  數:  ****************************************************/
/**** classFolder: 本類所放置的文件夾(對於使用它的文件來說  *******/
/****        width: 播放器總寬度(像素px)  **************************/
/****       height: 播放器總高度(像素px) *************************< /span>*/
/*****************************************************************/
/*****************************************************************/

PicturePlayer = function(classFolder,width,height)
{
    var o = this;
    this.Name = "PicturePlayer_"+(new Date()).getHours()
                                +(new Date()).getMinutes() 
                                +(new Date()).getSeconds() 
                                +(new Date()).getMilliseconds()
                                +(Math.random()+"").replace('.','');
    this.FontStyle = "font-size:12px;font-family:arial;";
    //定義外框
    this.MainBorderStyle = "1px solid #333333";
    this.PictureBoxBorderStyle = "1px solid #cccccc";

    this.MainBox  = null;
    this.Folder = (classFolder!=null)? classFolder : "./";
    this.Width = (width!=null)? width : 390;
    this.Height = (height!=null)? height : 360;
    this.BoxWidth = this.Width-10;
    this.BoxHeight = this.Height-40;
    this.PictureList = new Array();
    this.Pictures = new Array();
    this.TimeSpan = 1000;
    this.Timer = null;
    this.Current = 0;
    this.Box = null;
    this.PreBtn = null;
    this.PlayBtn = null;
    this.PauseBtn = null;
    this.NextBtn = null;
    this.StatusBar = null;

    this.__SkinFolder = "PicturePlayer/";
    this.__PlayBtnImgUrlOn        = this.Folder + this.__SkinFolder + "play.jpg";
    this.__PlayBtnImgUrlOff        = this.Folder + this.__SkinFolder + "play.jpg";
    this.__PauseBtnImgUrlOn        = this.Folder + this.__SkinFolder + "pause.jpg";
    this.__PauseBtnImgUrlOff    = this.Folder + this.__SkinFolder + "pause.jpg";
    this.__PreBtnImgUrlOn        = this.Folder + this.__SkinFolder + "pre.jpg";
    this.__PreBtnImgUrlOff        = this.Folder + this.__SkinFolder + "pre.jpg";
    this.__NextBtnImgUrlOn        = this.Folder + this.__SkinFolder + "next.jpg";
    this.__NextBtnImgUrlOff        = this.Folder + this.__SkinFolder + "next.jpg";

    this.Play = function()
    {
        this.PlayBtn.style.display = 'none';
        this.PauseBtn.style.display = '';
        this.Next();
        this.Timer = window.setTimeout(function(){o.Play()},this.TimeSpan);
        this.__StatusChange("Playing");

    }
    this.Pause = function()
    {
        window.clearTimeout(o.Timer);
        this.PlayBtn.style.display = '';
        this.PauseBtn.style.display = 'none';
        this.__StatusChange("Pausing");
    }
    this.Next = function()
    {
        if((this.Current+1)==this.Pictures.length)
            this.Current = -1;
        this.Show(this.Pictures[this.Current+1]);
        this.Current++;
    }
    this.Previously = function()
    {
        if((this.Current-1)==-1)
            this.Current = this.Pictures.length;
        this.Show(this.Pictures[this.Current-1]);
        this.Current--;
    }
    this.LoadImages = function()
    {
        this.__StatusChange("Reading picture records");

        for(var i=0;i<this.PictureList.length;i++)
        {
            var img = new Image();
            img.src = this.PictureList[i];
            //mg.update();
            this.Pictures[this.Pictures.length] = img;
        }
        this.Loading();        
    }
    this.Loading = function()
    {
        var inComplete = this.Pictures.length;
        for(var i=0;i<this.Pictures.length;i++)
        {
            if(document.all)
            {
                if(this.Pictures[i].readyState=="complete")    //for IE
                    inComplete--;
            }
            else
            {
                if(this.Pictures[i].complete==true)            //for Firefox
                    inComplete--;
            }
        }
        if(inComplete!=0)
        {
            this.__StatusChange("Loading pictures, "+inComplete+" inComplete");

            //this.Box.innerHTML = "Loading("+(this.Pictures.length-inComplete)+"/"+this.Pictures.length+")";
            window.setTimeout(function(){o.Loading()},100);
            return false;
        }else{
            this.__StatusChange("Loading complete");
            //this.Box.innerHTML = "complete";
            if(this.Pictures.length!=0)
            {
                this.Current = 0;
                this.Box.innerHTML = this.ShowImg(this.Pictures[0]);
            }
        }
    }
    this.Show = function(img)
    {
        this.Box.innerHTML = this.ShowImg(img);
    }
    this.ShowImg = function(img)
    {
        if(img.onerror)
            return "can not load this picture from the URL below:<br />"+img.src;

        var owidth = img.width;
        var oheight = img.height;
        var width = img.width;
        var height = img.height;
        if(width>this.BoxWidth || height>this.BoxHeight)
        {
            //alert(owidth+"/"+oheight+"\n"+this.BoxWidth+"/"+this.BoxHeight);
            if(owidth>=oheight)//200:100
            {
                height = parseFloat(this.BoxWidth) * parseFloat(oheight) / parseFloat(owidth);
                width = parseFloat(this.BoxWidth);
            }
            else
            {
                width = parseFloat(this.BoxHeight) * parseFloat(owidth) / parseFloat(oheight);
                height = this.BoxHeight;
            }
        
            if(parseInt(height)>parseInt(this.BoxHeight))
            {
                width = parseFloat(this.BoxHeight) * parseFloat(owidth) / parseFloat(oheight);
                height = this.BoxHeight;
            }
        }

        return "<img src='"+img.src+"' width='"+width+"' height='"+height+"' alt='' align='absmiddle' />";
    }
    this.__DrawFrame = function()
    {
        var str = "";
        str += "<div id='"+this.Name+"' style='"+this.FontStyle+";width:"+this.Width+"px;height:"+this.Height+"px;border:"+this.MainBorderStyle+";'></div>";
        document.writeln(str);
        this.MainBox = document.getElementById(this.Name);
    }
    this.__DrawPictureBox = function()
    {
        var outSideBox = document.createElement('div');
        outSideBox.style.width = "100%";
        outSideBox.style.textAlign = "center";

        var box = document.createElement('div');
        box.id = this.Name+'_box';
        box.style.width = this.BoxWidth+"px";
        box.style.height = this.BoxHeight+"px";
        box.style.textAlign = "center";
        box.style.lineHeight = this.BoxHeight+"px";

        outSideBox.appendChild(box);
        this.MainBox.appendChild(outSideBox);
        this.Box = document.getElementById(box.id);
    }
    this.__DrawToolBar = function()
    {
        var bar = document.createElement('div');
        bar.id = this.Name+'_StatusBar';
        bar.style.width = "100%";
        bar.style.height = "25px";
        bar.style.textAlign = "center";
        bar.style.lineHeight = "25px";
        
        this.MainBox.appendChild(bar);
        this.ToolBar = document.getElementById(bar.id);
    }
    this.__DrawStatusBar = function()
    {
        var bar = document.createElement('div');
        bar.id = this.Name+'_StatusBar';
        bar.style.width = "100%";
        bar.style.height = "20px";
        bar.style.textAlign = "right";
        bar.style.lineHeight = "18px";
        
        this.MainBox.appendChild(bar);
        this.StatusBar = document.getElementById(bar.id);
    }
    this.__CreateToolBarButton = function(id, imgUrl, clickHandle)
    {
        var btn = new Image();
        btn.src = imgUrl;
        btn.id = id;
        btn.style.margin = "5px 10px 3px 10px";
        btn.style.cursor = "pointer";
        btn.onclick = clickHandle;
        this.ToolBar.appendChild(btn);
    }
    this.__InitializingToolBar = function()
    {
        this.__CreateToolBarButton(this.Name+"_preBtn", this.__PreBtnImgUrlOn, function(){o.Previously()});
        this.__CreateToolBarButton(this.Name+"_playBtn", this.__PlayBtnImgUrlOn, function(){o.Play()});
        this.__CreateToolBarButton(this.Name+"_pauseBtn", this.__PauseBtnImgUrlOn, function(){o.Pause()});
        this.__CreateToolBarButton(this.Name+"_nextBtn", this.__NextBtnImgUrlOn, function(){o.Next()});

        this.PreBtn = document.getElementById(""+this.Name+"_preBtn");
        this.PlayBtn = document.getElementById(this.Name+"_playBtn");
        this.PauseBtn = document.getElementById(this.Name+'_pauseBtn');
        this.NextBtn = document.getElementById(this.Name+'_nextBtn');
    }
    this.__Init = function()
    {
        this.__DrawFrame();
        this.__DrawPictureBox();
        this.__DrawToolBar();
        this.__DrawStatusBar();
        this.__StatusChange("Initializing");
        this.__InitializingToolBar();
    }
    this.__StatusChange = function(str)
    {
        this.StatusBar.innerHTML = str;
    }
    this.Run = function()
    {
        /**/
        this.LoadImages();
        if(this.Pictures.length==0)
        {
            this.PreBtn.disabled = true;
            this.PlayBtn.disabled = true;
            this.PauseBtn.disabled = true;
            this.NextBtn.disabled = true;
            this.Box.innerHTML = "No picture for display!";
        }else{
        }
            this.PauseBtn.style.display = 'none';
        /**/

    }
    this.__Init();

}

调用：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> PicturePlayer </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<script type="text/javascript" language="javascript" charset="utf-8" src="./PicturePlayer.js"></script>
</head>

<body>
<script type="text/javascript" language="javascript">
<!--
var pictures = new Array(
"http://www.google.com/intl/zh-CN_ALL/images/logo.gif",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ621.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ622.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ623.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ625.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ626.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ627.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ628.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ629.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ630.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ631.jpg",
"http://www.mydeskcity.com/desk/JDSJ100/225/JDSJ632.jpg2",
"file:///C:/Documents and Settings/f3215004/ 桌面/temp/bg_header.jpg"
);
var player = new PicturePlayer();
player.PictureList = pictures;
player.Run();
//-->
</script>
<BR><BR>
<script type="text/javascript" language="javascript">
<!--
var player2 = new PicturePlayer();
player2.PictureList = pictures;
player2.Run();
//-->
</script>

</body>
</html>

Enjoy it, ^_^