请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 3245|回复: 2

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

bluefrit 楼主
帖子
2
体力
27
威望
0
发表于 2008-6-27 13:27:39 |显示全部楼层
新闻系统,相册系统可以用用哦,简单实用,有兴趣的可以自己扩充!^_^
  1. /*
  2. *名称:图片播放器
  3. *作者: bluefee
  4. *日期: 2008-06-26
  5. *版权: Copyright 2008 www.sharklet.cn. All rights reserved.
  6. */
  7. var photoPlayer = function () {
  8.         var _this = this;
  9.         //播放器宽度
  10.         this.width = 0;
  11.         //播放器高度
  12.         this.height = 0;
  13.         //图片编号
  14.         this.id = "";
  15.         //图片标题
  16.         this.title = "";
  17.         //图片地址
  18.         this.url = "";
  19.         //图片原始宽度
  20.         this.photoWidth = 0;
  21.         //图片原始高度
  22.         this.photoHeight = 0;
  23.         //定时器
  24.         this.timer = null;
  25.         //预读图片对象
  26.         this.image = null;
  27.         //当前索引
  28.         this.currentIndex = 0;
  29.         //图片资源数组
  30.         this.elements = [];
  31.         //添加资源
  32.         this.addPhoto = function( id,title,url ) {
  33.                 var resource = id + "|" + title + "|" + url;
  34.                 this.elements.push( resource );
  35.         }
  36.         //工具栏
  37.         this.tools = [ "prev","next","resize","zoom","camera","about" ];
  38.         this.initializeTools = function () {
  39.                 var tools = document.getElementById( "tools" );
  40.                 for (var toolsIndex=0;toolsIndex<this.tools.length ;toolsIndex++ )
  41.                 {
  42.                         switch ( this.tools[toolsIndex] )
  43.                         {
  44.                                 case "prev":
  45.                                         var anchor = document.createElement("a");
  46.                                         anchor.href = "#";
  47.                                         anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/prev.gif\" alt=\"上一张\"/>上一张";
  48.                                         anchor.onclick = function() { _this.prev() };
  49.                                         tools.appendChild( anchor );
  50.                                         break;
  51.                                 case "next":
  52.                                         var anchor = document.createElement("a");
  53.                                         anchor.href = "#";
  54.                                         anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/next.gif\" alt=\"下一张\"/>下一张";
  55.                                         anchor.onclick = function() { _this.next() };
  56.                                         tools.appendChild( anchor );
  57.                                         break;
  58.                                 case "resize":
  59.                                         var anchor = document.createElement("a");
  60.                                         anchor.href = "#";
  61.                                         anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/resize.gif\" alt=\"实际大小\"/>实际大小";
  62.                                         anchor.onclick = function() { _this.resize() };
  63.                                         tools.appendChild( anchor );
  64.                                         break;
  65.                                 case "zoom":
  66.                                         var anchor = document.createElement("a");
  67.                                         anchor.href = "#";
  68.                                         anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/zoom.gif\" alt=\"自动缩放\"/>自动缩放";
  69.                                         anchor.onclick = function() { _this.zoom() };
  70.                                         tools.appendChild( anchor );
  71.                                         break;
  72.                                 case "camera":
  73.                                         var anchor = document.createElement("a");
  74.                                         anchor.href = "#";
  75.                                         anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/camera.gif\" alt=\"幻灯片模式\"/>幻灯片";
  76.                                         anchor.onclick = function() { _this.camera() };
  77.                                         tools.appendChild( anchor );
  78.                                         break;
  79.                                 case "about":
  80.                                         var anchor = document.createElement("a");
  81.                                         anchor.href = "#";
  82.                                         anchor.innerHTML = "<img src=\"http://www.sharklet.cn/PhotoPlayer/about.gif\" alt=\"版本信息\"/>版本信息";
  83.                                         anchor.onclick = this.about;
  84.                                         tools.appendChild( anchor );
  85.                                         break;
  86.                         }
  87.                 }
  88.         }

  89.         this.show = function () {
  90.                 var playerHTML = "";
  91.                 playerHTML += "<div id=\"photoPlayer\" style=\"width:";
  92.                 playerHTML += this.width;
  93.                 playerHTML += "px;height=\"";
  94.                 playerHTML += this.height;
  95.                 playerHTML += "px;\">\n";
  96.                 playerHTML += "<div id=\"photo\" align=\"center\">\n";
  97.                 playerHTML += "<img id=\"photoResource\" alt=\"\"/>\n"
  98.                 playerHTML += "</div>\n";
  99.                 playerHTML += "<div id=\"title\">\n";
  100.                 playerHTML += "</div>\n";
  101.                 playerHTML += "<div id=\"tools\">\n";
  102.                 playerHTML += "</div>\n";
  103.                 playerHTML += "</div>\n";
  104.                 document.writeln( playerHTML );
  105.                 this.initializeTools();
  106.                 this.render();
  107.         }

  108.         this.render = function() {
  109.                 var photo = this.elements[this.currentIndex].split( "|" );
  110.                 this.id = photo[0];
  111.                 this.title = photo[1];
  112.                 this.url = photo[2];
  113.                 this.image = new Image();
  114.                 this.image.src = this.url;
  115.                 this.photoWidth = this.image.width;
  116.                 this.photoHeight = this.image.height;
  117.                 var photoResource = document.getElementById("photoResource");
  118.                 if( this.photoWidth > 0 && this.photoHeight > 0 )
  119.                 {
  120.                         if( this.photoWidth/this.photoHeight >= this.width/this.height )
  121.                         {
  122.                                 if( this.photoWidth > this.width )
  123.                                 {
  124.                                         photoResource.width = this.width;
  125.                                         photoResource.height = (this.photoHeight * this.width ) / this.photoWidth;
  126.                                 }
  127.                                 else
  128.                                 {
  129.                                         photoResource.width= this.photoWidth;
  130.                                         photoResource.height = this.photoHeight;
  131.                                 }
  132.                          }
  133.                          else
  134.                          {
  135.                                 if( this.photoHeight > this.height )
  136.                                 {
  137.                                         photoResource.height = this.height;
  138.                                         photoResource.width = (this.photoWidth * this.height) / this.photoHeight;
  139.                                 }
  140.                                 else
  141.                                 {
  142.                                         photoResource.width = this.photoWidth;
  143.                                         photoResource.height = this.photoHeight;
  144.                                 }
  145.                         }
  146.                 }
  147.                 photoResource.src = this.image.src;
  148.                 photoResource.alt = this.title;
  149.                 this.image = null;
  150.         }

  151.         this.prev = function() {
  152.                 if ( (this.currentIndex-1) >= 0  )
  153.                 {
  154.                         this.currentIndex--;
  155.                 }
  156.                 else
  157.                 {
  158.                         this.currentIndex = this.elements.length - 1;
  159.                 }
  160.                 this.render();
  161.         }

  162.         this.next = function() {
  163.                 if ( (this.currentIndex+1) < this.elements.length)
  164.                 {
  165.                         this.currentIndex++;
  166.                 }
  167.                 else
  168.                 {
  169.                         this.currentIndex = 0;
  170.                 }
  171.                 this.render();
  172.         }

  173.         this.resize = function() {
  174.                 var photoResource = document.getElementById("photoResource");
  175.                 photoResource.width = this.photoWidth;
  176.                 photoResource.height = this.photoHeight;
  177.         }

  178.         this.zoom = function() {
  179.                 this.render();
  180.         }

  181.         this.slider = function ()
  182.         {
  183.                 if ( this.currentIndex + 1 >= this.elements.length )
  184.                 {
  185.                         this.currentIndex = 0;
  186.                 }
  187.                 else
  188.                 {
  189.                         this.currentIndex++;
  190.                 }
  191.                 this.render();
  192.         }

  193.         this.camera = function() {
  194.                 if ( this.timer )
  195.                 {
  196.                         window.clearInterval( this.timer );
  197.                         this.timer = null;
  198.                 }
  199.                 else
  200.                 {
  201.                         this.timer = window.setInterval( function() { _this.slider(); },3000 );
  202.                 }
  203.         }

  204.         this.about = function() {
  205.                 alert( "图片播放器 1.0 作者:bluefee" );
  206.         }
  207. }
  208. var player = new photoPlayer();
  209. player.addPhoto( 1,"甜甜的美女_01","http://www.sharklet.cn/MM1.jpg" );
  210. player.addPhoto( 2,"甜甜的美女_02 ","http://www.sharklet.cn/MM2.jpg" );
  211. player.width = 640;
  212. player.height = 480;
  213. player.show();
复制代码

 提示:您可以先修改部分代码再运行


效果演示:http://www.sharklet.cn/PhotoPlayer.html

[ 本帖最后由 bluefrit 于 2008-6-27 13:38 编辑 ]
西部数码顶级域名注册商39元抢注!
ascii 

阿斯奇

银牌会员

帖子
5179
体力
1865
威望
2
居住地
福建省 厦门市
发表于 2008-6-27 13:37:04 |显示全部楼层
要什么有什么,,,我正在google这类信息

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

[ 本帖最后由 ascii 于 2008-6-27 13:38 编辑 ]
中国法律的存在形式都是.txt格式,不是.exe格式。
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

帖子
59
体力
201
威望
0
发表于 2008-6-27 14:39:41 |显示全部楼层
很不错,收藏了

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 07:14 , Processed in 0.084895 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部