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

bluefrit 楼主

新闻系统，相册系统可以用用哦，简单实用，有兴趣的可以自己扩充！^_^

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. 
    
90.         this.show = function () {
    
91.                 var playerHTML = "";
    
92.                 playerHTML += "<div id=\"photoPlayer\" style=\"width:";
    
93.                 playerHTML += this.width;
    
94.                 playerHTML += "px;height=\"";
    
95.                 playerHTML += this.height;
    
96.                 playerHTML += "px;\">\n";
    
97.                 playerHTML += "<div id=\"photo\" align=\"center\">\n";
    
98.                 playerHTML += "<img id=\"photoResource\" alt=\"\"/>\n"
    
99.                 playerHTML += "</div>\n";
    
100.                 playerHTML += "<div id=\"title\">\n";
     
101.                 playerHTML += "</div>\n";
     
102.                 playerHTML += "<div id=\"tools\">\n";
     
103.                 playerHTML += "</div>\n";
     
104.                 playerHTML += "</div>\n";
     
105.                 document.writeln( playerHTML );
     
106.                 this.initializeTools();
     
107.                 this.render();
     
108.         }
     
109. 
     
110.         this.render = function() {
     
111.                 var photo = this.elements[this.currentIndex].split( "|" );
     
112.                 this.id = photo[0];
     
113.                 this.title = photo[1];
     
114.                 this.url = photo[2];
     
115.                 this.image = new Image();
     
116.                 this.image.src = this.url;
     
117.                 this.photoWidth = this.image.width;
     
118.                 this.photoHeight = this.image.height;
     
119.                 var photoResource = document.getElementById("photoResource");
     
120.                 if( this.photoWidth > 0 && this.photoHeight > 0 )
     
121.                 {
     
122.                         if( this.photoWidth/this.photoHeight >= this.width/this.height )
     
123.                         {
     
124.                                 if( this.photoWidth > this.width )
     
125.                                 {
     
126.                                         photoResource.width = this.width;
     
127.                                         photoResource.height = (this.photoHeight * this.width ) / this.photoWidth;
     
128.                                 }
     
129.                                 else
     
130.                                 {
     
131.                                         photoResource.width= this.photoWidth;
     
132.                                         photoResource.height = this.photoHeight;
     
133.                                 }
     
134.                          }
     
135.                          else
     
136.                          {
     
137.                                 if( this.photoHeight > this.height )
     
138.                                 {
     
139.                                         photoResource.height = this.height;
     
140.                                         photoResource.width = (this.photoWidth * this.height) / this.photoHeight;
     
141.                                 }
     
142.                                 else
     
143.                                 {
     
144.                                         photoResource.width = this.photoWidth;
     
145.                                         photoResource.height = this.photoHeight;
     
146.                                 }
     
147.                         }
     
148.                 }
     
149.                 photoResource.src = this.image.src;
     
150.                 photoResource.alt = this.title;
     
151.                 this.image = null;
     
152.         }
     
153. 
     
154.         this.prev = function() {
     
155.                 if ( (this.currentIndex-1) >= 0  )
     
156.                 {
     
157.                         this.currentIndex--;
     
158.                 }
     
159.                 else
     
160.                 {
     
161.                         this.currentIndex = this.elements.length - 1;
     
162.                 }
     
163.                 this.render();
     
164.         }
     
165. 
     
166.         this.next = function() {
     
167.                 if ( (this.currentIndex+1) < this.elements.length)
     
168.                 {
     
169.                         this.currentIndex++;
     
170.                 }
     
171.                 else
     
172.                 {
     
173.                         this.currentIndex = 0;
     
174.                 }
     
175.                 this.render();
     
176.         }
     
177. 
     
178.         this.resize = function() {
     
179.                 var photoResource = document.getElementById("photoResource");
     
180.                 photoResource.width = this.photoWidth;
     
181.                 photoResource.height = this.photoHeight;
     
182.         }
     
183. 
     
184.         this.zoom = function() {
     
185.                 this.render();
     
186.         }
     
187. 
     
188.         this.slider = function ()
     
189.         {
     
190.                 if ( this.currentIndex + 1 >= this.elements.length )
     
191.                 {
     
192.                         this.currentIndex = 0;
     
193.                 }
     
194.                 else
     
195.                 {
     
196.                         this.currentIndex++;
     
197.                 }
     
198.                 this.render();
     
199.         }
     
200. 
     
201.         this.camera = function() {
     
202.                 if ( this.timer )
     
203.                 {
     
204.                         window.clearInterval( this.timer );
     
205.                         this.timer = null;
     
206.                 }
     
207.                 else
     
208.                 {
     
209.                         this.timer = window.setInterval( function() { _this.slider(); },3000 );
     
210.                 }
     
211.         }
     
212. 
     
213.         this.about = function() {
     
214.                 alert( "图片播放器 1.0 作者:bluefee" );
     
215.         }
     
216. }
     
217. var player = new photoPlayer();
     
218. player.addPhoto( 1,"甜甜的美女_01","http://www.sharklet.cn/MM1.jpg" );
     
219. player.addPhoto( 2,"甜甜的美女_02 ","http://www.sharklet.cn/MM2.jpg" );
     
220. player.width = 640;
     
221. player.height = 480;
     
222. player.show();

复制代码

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans" lang="zh-Hans"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="none" /> <meta name="author" content="bluefee" /> <title>图片播放器 1.0 作者:bluefee</title> <style type="text/css" rel="stylesheet"> body {text-align:center;} img {border:0;vertical-align:middle;} div#photoPlayer {border:1px solid #CCC;margin:0 auto;padding:8px;} div#photoPlayer div#photo {margin:0;padding:0;} div#photoPlayer div#tools {text-align:center;height:32px;line-height:32px;margin-top:8px;} div#photoPlayer div#tools a {width:96px;height:30px;line-height:30px;padding:4px;font-size:12px;color:#249A04;text-decoration:none;} div#photoPlayer div#tools a img {margin-right:4px;} div#photoPlayer div#tools a:link {border:none;} div#photoPlayer div#tools a:visited {border:none;} div#photoPlayer div#tools a:hover {border:1px solid #249A04;} div#photoPlayer div#tools a:active {border:1px solid #249A04;} </style> <script type="text/javascript"> /* *名称:图片播放器 *作者: 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" ); } } </script> </head> <body> <script type="text/javascript"> 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(); </script> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

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

[ 本帖最后由 bluefrit 于 2008-6-27 13:38 编辑 ]

ascii

要什么有什么,,,我正在google这类信息

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

[ 本帖最后由 ascii 于 2008-6-27 13:38 编辑 ]

dictionarydxn

很不错，收藏了