打印

[分享] 简单实用的图片播放器1.0(Javascript + css )

新闻系统,相册系统可以用用哦,简单实用,有兴趣的可以自己扩充!^_^
复制内容到剪贴板
代码:
/*
*名称:图片播放器
*作者: bluefee
*日期: 2008-06-26
*版权: Copyright 2008 www.sharklet.cn. All rights reserved.
*/
var photoPlayer = function () {
    var _this = this;
    //播放器宽度
    this.width = 0;
    //播放器高度
    this.height = 0;
    //图片编号
    this.id = "";
    //图片标题
    this.title = "";
    //图片地址
    this.url = "";
    //图片原始宽度
    this.photoWidth = 0;
    //图片原始高度
    this.photoHeight = 0;
    //定时器
    this.timer = null;
    //预读图片对象
    this.image = null;
    //当前索引
    this.currentIndex = 0;
    //图片资源数组
    this.elements = [];
    //添加资源
    this.addPhoto = function( id,title,url ) {
        var resource = id + "|" + title + "|" + url;
        this.elements.push( resource );
    }
    //工具栏
    this.tools = [ "prev","next","resize","zoom","camera","about" ];
    this.initializeTools = function () {
        var tools = document.getElementById( "tools" );
        for (var toolsIndex=0;toolsIndex<this.tools.length ;toolsIndex++ )
        {
            switch ( this.tools[toolsIndex] )
            {
                case "prev":
                    var anchor = document.createElement("a");
                    anchor.href = "#";
                    anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/prev.gif\" alt=\"上一张\"/>上一张";
                    anchor.onclick = function() { _this.prev() };
                    tools.appendChild( anchor );
                    break;
                case "next":
                    var anchor = document.createElement("a");
                    anchor.href = "#";
                    anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/next.gif\" alt=\"下一张\"/>下一张";
                    anchor.onclick = function() { _this.next() };
                    tools.appendChild( anchor );
                    break;
                case "resize":
                    var anchor = document.createElement("a");
                    anchor.href = "#";
                    anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/resize.gif\" alt=\"实际大小\"/>实际大小";
                    anchor.onclick = function() { _this.resize() };
                    tools.appendChild( anchor );
                    break;
                case "zoom":
                    var anchor = document.createElement("a");
                    anchor.href = "#";
                    anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/zoom.gif\" alt=\"自动缩放\"/>自动缩放";
                    anchor.onclick = function() { _this.zoom() };
                    tools.appendChild( anchor );
                    break;
                case "camera":
                    var anchor = document.createElement("a");
                    anchor.href = "#";
                    anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/camera.gif\" alt=\"幻灯片模式\"/>幻灯片";
                    anchor.onclick = function() { _this.camera() };
                    tools.appendChild( anchor );
                    break;
                case "about":
                    var anchor = document.createElement("a");
                    anchor.href = "#";
                    anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/about.gif\" alt=\"版本信息\"/>版本信息";
                    anchor.onclick = this.about;
                    tools.appendChild( anchor );
                    break;
            }
        }
    }
    this.show = function () {
        var playerHTML = "";
        playerHTML += "<div id=\"photoPlayer\" style=\"width:";
        playerHTML += this.width;
        playerHTML += "px;height=\"";
        playerHTML += this.height;
        playerHTML += "px;\">\n";
        playerHTML += "<div id=\"photo\" align=\"center\">\n";
        playerHTML += "<img id=\"photoResource\" alt=\"\"/>\n"
        playerHTML += "</div>\n";
        playerHTML += "<div id=\"title\">\n";
        playerHTML += "</div>\n";
        playerHTML += "<div id=\"tools\">\n";
        playerHTML += "</div>\n";
        playerHTML += "</div>\n";
        document.writeln( playerHTML );
        this.initializeTools();
        this.render();
    }
    this.render = function() {
        var photo = this.elements[this.currentIndex].split( "|" );
        this.id = photo[0];
        this.title = photo[1];
        this.url = photo[2];
        this.image = new Image();
        this.image.src = this.url;
        this.photoWidth = this.image.width;
        this.photoHeight = this.image.height;
        var photoResource = document.getElementById("photoResource");
        if( this.photoWidth > 0 && this.photoHeight > 0 )
        {
            if( this.photoWidth/this.photoHeight >= this.width/this.height )
            {
                if( this.photoWidth > this.width )
                {
                    photoResource.width = this.width;
                    photoResource.height = (this.photoHeight * this.width ) / this.photoWidth;
                }
                else
                {
                    photoResource.width= this.photoWidth;
                    photoResource.height = this.photoHeight;
                }
             }
             else
             {
                if( this.photoHeight > this.height )
                {
                    photoResource.height = this.height;
                    photoResource.width = (this.photoWidth * this.height) / this.photoHeight;
                }
                else
                {
                    photoResource.width = this.photoWidth;
                    photoResource.height = this.photoHeight;
                }
            }
        }
        photoResource.src = this.image.src;
        photoResource.alt = this.title;
        this.image = null;
    }
    this.prev = function() {
        if ( (this.currentIndex-1) >= 0  )
        {
            this.currentIndex--;
        }
        else
        {
            this.currentIndex = this.elements.length - 1;
        }
        this.render();
    }
    this.next = function() {
        if ( (this.currentIndex+1) < this.elements.length)
        {
            this.currentIndex++;
        }
        else
        {
            this.currentIndex = 0;
        }
        this.render();
    }
    this.resize = function() {
        var photoResource = document.getElementById("photoResource");
        photoResource.width = this.photoWidth;
        photoResource.height = this.photoHeight;
    }
    this.zoom = function() {
        this.render();
    }
    this.slider = function ()
    {
        if ( this.currentIndex + 1 >= this.elements.length )
        {
            this.currentIndex = 0;
        }
        else
        {
            this.currentIndex++;
        }
        this.render();
    }
    this.camera = function() {
        if ( this.timer )
        {
            window.clearInterval( this.timer );
            this.timer = null;
        }
        else
        {
            this.timer = window.setInterval( function() { _this.slider(); },3000 );
        }
    }
    this.about = function() {
        alert( "图片播放器 1.0 作者:bluefee" );
    }
}
var player = new photoPlayer();
player.addPhoto( 1,"甜甜的美女_01","http://www.sharklet.cn/MM1.jpg" );
player.addPhoto( 2,"甜甜的美女_02 ","http://www.sharklet.cn/MM2.jpg" );
player.width = 640;
player.height = 480;
player.show();


 提示:您可以先修改部分代码再运行
效果演示:http://www.sharklet.cn/PhotoPlayer.html

[ 本帖最后由 bluefrit 于 2008-6-27 13:38 编辑 ]
要什么有什么,,,我正在google这类信息

还可以再升级成播放器的 楼主加油

[ 本帖最后由 ascii 于 2008-6-27 13:38 编辑 ]
css&js入门
很不错,收藏了