位置：首页>> 网络编程>> JavaScript>> 简单实用的图片播放器1.0(Javascript + css )

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

作者：bluefee　来源：经典论坛　发布时间：2008-07-16 10:39:00　

标签：播放器,图片,相册

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

相册截图：

<?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=\"/file/UploadPic/20087/16/2008716105033972.gif\" alt=\"上一张\"/>上一张";anchor.onclick = function() { _this.prev() };tools.appendChild( anchor );break;case "next":var anchor = document.createElement("a");anchor.href = "#";anchor.innerHTML = "<img src=\"/file/UploadPic/20087/16/2008716105037205.gif\" alt=\"下一张\"/>下一张";anchor.onclick = function() { _this.next() };tools.appendChild( anchor );break;case "resize":var anchor = document.createElement("a");anchor.href = "#";anchor.innerHTML = "<img src=\"/file/UploadPic/20087/16/2008716105038303.gif\" alt=\"实际大小\"/>实际大小";anchor.onclick = function() { _this.resize() };tools.appendChild( anchor );break;case "zoom":var anchor = document.createElement("a");anchor.href = "#";anchor.innerHTML = "<img src=\"/file/UploadPic/20087/16/2008716105038322.gif\" alt=\"自动缩放\"/>自动缩放";anchor.onclick = function() { _this.zoom() };tools.appendChild( anchor );break;case "camera":var anchor = document.createElement("a");anchor.href = "#";anchor.innerHTML = "<img src=\"/file/UploadPic/20087/16/2008716105038601.gif\" alt=\"幻灯片模式\"/>幻灯片";anchor.onclick = function() { _this.camera() };tools.appendChild( anchor );break;case "about":var anchor = document.createElement("a");anchor.href = "#";anchor.innerHTML = "<img src=\"/file/UploadPic/20087/16/2008716105038607.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","/file/UploadPic/20087/16/2008716105039586.jpg" );player.addPhoto( 2,"甜甜的美女_02 ","/file/UploadPic/20087/16/2008716105039538.jpg" );player.width = 640;player.height = 480;player.show();</script></body></html>

投稿

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

猜你喜欢