新闻系统,相册系统可以用用哦,简单实用,有兴趣的可以自己扩充!^_^
复制内容到剪贴板
代码:
/*
*名称:图片播放器
*作者: 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 编辑 ]