新闻系统,相册系统可以用用哦,简单实用,有兴趣的可以自己扩充!^_^
相册截图:
<?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=\"/article/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=\"/article/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=\"/article/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=\"/article/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=\"/article/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=\"/article/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","/article/UploadPic/20087/16/2008716105039586.jpg" ); player.addPhoto( 2,"甜甜的美女_02 ","/article/UploadPic/20087/16/2008716105039538.jpg" ); player.width = 640; player.height = 480; player.show(); </script> </body> </html> [提示:你可先修改部分代码,再按运行]