<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Keywords" content="ppt;javascript;css;web design;dom">
<meta http-equiv="Auther" content="barenx@163.com">
<title>图片浏览</title>
<style type="text/css">
/*Copyright(C) 2007-2008. BAREN Productions. All rights reserved.*/
BODY {
width:100%;
height:100%;
overflow:hidden;
background-color:#273842;
background-image:url(img/bg2.gif);
background-repeat:repeat-x;
}
.MainTable{
width:100%;
height:100%;
border:none;
text-align:center;
vertical-align:middle;
}
.InfoTD{
color:#eeeeee;
font-size:12px;
width:100%;
height:40px;
border:none;
display:table-cell;
}
.InfoTD a{
color:#eeeeee;
}
.InfoTD nobr{
padding-left:5px;
padding-right:5px;
}
.InfoTD span{
padding-left:10px;
padding-right:10px;
}
.MainTD{
width:100%;
height:auto;
border:none;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.MainDiv{
width:90%;
height:95%;
left:5%;
top:5%;
display:block;
position:absolute;
}
#ImgDiv{
width:100%;
height:100%;
vertical-align:middle;
overflow:hidden;
display:block;
position:relative;
z-index:0;
border:none;
}
#ImgDiv img{
width:auto;
height:auto;
display:block;
position:absolute;
vertical-align:middle;
padding-top:10px;
}
#ImgDiv #imgShow{
z-index:1;
visibility:hidden;
border:3px solid #cccccc;
}
#ImgDiv #imgBuffer{
z-index:-1;
visibility:hidden;
}
#ConDiv{
width:100%;
height:42px;
left:0px;
bottom:7%;
text-align:center;
display:block;
position:absolute;
overflow:hidden;
z-index:3;
}
#iControl{
top:0px;
position:relative;
height:100%;
width:348px;
visibility:visible;
background:url(img/control.gif) no-repeat;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);
}
#iControl a, #iControl *{
display:table-cell;
position:absolute;
width:30px;
height:42px;
overflow:hidden;
border:none;
}
.iPre{
left:24px;
background:url(img/contro_bar.gif) 0px 0px no-repeat;
}
.iPre:hover{
background:url(img/contro_bar.gif) 0px -42px no-repeat;
}
.iPlay{
left:159px;
background:url(img/contro_bar.gif) -30px 0px no-repeat;
}
.iPlay:hover{
background:url(img/contro_bar.gif) -30px -42px no-repeat;
}
.iPause{
left:159px;
background:url(img/contro_bar.gif) -60px 0px no-repeat;
}
.iPause:hover{
background:url(img/contro_bar.gif) -60px -42px no-repeat;
}
.iNext{
right:24px;
background:url(img/contro_bar.gif) -90px 0px no-repeat;
}
.iNext:hover{
background:url(img/contro_bar.gif) -90px -42px no-repeat;
}
.logoImg{
float:right;
}
</style>
<script language="javascript" type="text/javascript">
//Copyright(C) 2007-2008. BAREN Productions. All rights reserved.
ImgView={
autoFix:function(O){
O.style.visibility="hidden";
O.style.width="auto";
O.style.height="auto";
var pW=O.parentNode.clientWidth-10;
var pH=O.parentNode.clientHeight-10;
var oW=O.clientWidth
var oH=O.clientHeight;
if (oW>pW || oH>pH){
if (oW/oH>pW/pH){
O.style.width=pW;
oH=oH/oW*pW;
oW=pW;
O.height="auto";
}
else{
O.style.height=pH;
oW=oW/oH*pH;
oH=pH;
O.style.width="auto";
}
}
O.style.left=(pW-oW)/2;
O.style.top=(pH-oH)/2;
ImgFilter.doFilter(this.Viewer,O)
//O.style.visibility="visible";
},
_Play:function(){
if(ImgBuffer.move(1)){
ImgView.ShowImg.src=ImgBuffer.getRel(0);
ImgView.BuferImg.src=ImgBuffer.getRel(1);
ImgBuffer.updateInfo();
ImgView.Timer=setTimeout(ImgView._Play,2750);
}
else ImgView._doStop();
},
_doPlay:function(){
clearTimeout(this.Timer);
this._Play();
this.btPlay.className="iPause";
this.status=0;
},
_doStop:function(){
clearTimeout(this.Timer);
this.btPlay.className="iPlay";
this.status=1
},
doPlay:function(){
if(this.status) this._doPlay();
else this._doStop();
},
doNext:function(n){
this._doStop();
if(ImgBuffer.move(n)){
this.ShowImg.src=ImgBuffer.getRel(0);
this.BuferImg.src=ImgBuffer.getRel(1);
ImgBuffer.updateInfo();
return true;
}
else return false;
//document.title=ImgBuffer.pointer;
},
Init:function(){
this.ShowImg=document.getElementById('imgShow');
this.BuferImg=document.getElementById('imgBuffer');
this.Viewer=document.getElementById('ImgDiv');
this.btPlay=document.getElementById('bPlay');
this.status=1;
this.Timer=0;
this.ShowImg.onload=window.onresize=function(){ImgView.autoFix(ImgView.ShowImg)}
this.doNext(1);
}
};
ImgFilter={
Filters:[
"progid:DXImageTransform.Microsoft.Barn()",
"BlendTrans()",
"progid:DXImageTransform.Microsoft.Blinds()",
"progid:DXImageTransform.Microsoft.CheckerBoard()",
"progid:DXImageTransform.Microsoft.Fade()",
"progid:DXImageTransform.Microsoft.GradientWipe()",
"progid:DXImageTransform.Microsoft.Inset()",
"progid:DXImageTransform.Microsoft.Iris()",
"progid:DXImageTransform.Microsoft.Pixelate()",
"progid:DXImageTransform.Microsoft.RadialWipe()",
"progid:DXImageTransform.Microsoft.RandomBars()",
"progid:DXImageTransform.Microsoft.RandomDissolve()",
"progid:DXImageTransform.Microsoft.RevealTrans(transition=23)",
"progid:DXImageTransform.Microsoft.Slide()",
"progid:DXImageTransform.Microsoft.Spiral()",
"progid:DXImageTransform.Microsoft.Stretch()",
"progid:DXImageTransform.Microsoft.Strips()",
"progid:DXImageTransform.Microsoft.Wheel()",
"progid:DXImageTransform.Microsoft.Zigzag()"
],
getInstance:function(){
return this.Filters[Math.floor(Math.random()*0xFFFFFF) % this.Filters.length];
},
doFilter:function(F,O){
F.style.filter=this.getInstance();
F.filters[0].Apply();
O.style.visibility="visible";
F.filters[0].play();
}
};
ControlBar={
DivTimeout:0,
MouseTimout:0,
status:1,
obj:null,
objf:null,
_fadeIn:function(){
if(ControlBar.objf.Opacity<75){
ControlBar.objf.Opacity+=5;
ControlBar.DivTimeout=setTimeout(ControlBar._fadeIn,5);
}
else{
ControlBar.status=1;
}
},
_fadeOut:function(){
if(ControlBar.objf.Opacity>10){
ControlBar.objf.Opacity-=5;
ControlBar.DivTimeout=setTimeout(ControlBar._fadeOut,5);
}
else {
ControlBar.obj.style.visibility="hidden";
ControlBar.status=0;
}
},
fadeIn:function(){
if(ControlBar.status==1)return;
ControlBar.obj.style.visibility="visible";
clearTimeout(ControlBar.DivTimeout);
ControlBar._fadeIn();
},
fadeOut:function(){
clearTimeout(ControlBar.DivTimeout);
if (ControlBar.Inbox) return;
ControlBar._fadeOut();
},
onMove:function(){
if (ControlBar.obj.currentStyle.visibility=="visible"){
clearTimeout(ControlBar.MouseTimout);
ControlBar.MouseTimout=setTimeout(ControlBar.fadeOut,2200);
}
else ControlBar.fadeIn();
},
Init:function(){
this.obj=document.getElementById('iControl');
this.objf=this.obj.filters[0];
this.obj.onmouseenter=function(){ControlBar.Inbox=true;ControlBar.objf.Opacity=88}
this.obj.onmouseout=function(){ControlBar.objf.Opacity=75;ControlBar.Inbox=false;}
document.onmousemove=this.onMove;
}
}
//修改imgbuffer的代码使得可以动态获取缓冲区里面的数据
//demo程序的buffer是静态的,应用中更换成ajax请求
ImgBuffer={
buffer:[],
infomation:[],
pointer:-1,
//移动缓冲区指针
move:function(v){
var t=this.pointer+v;
if(t>=0 && t<this.buffer.length) {
this.pointer=t;
return true;
}
return false;
},
//获得指针相对位置的数据
getRel:function(v){
return this.buffer[this.pointer+v];
},
//获得获得缓冲区绝对位置的数据(未使用)
getAbs:function(v){
return this.buffer[v];
},
//请重载此函数!功能:获得当前图片的信息
getCurInfo:function(){
//return null;
return this.infomation[this.pointer];
},
//更新图片信息
updateInfo:function(){
var o=this.getCurInfo()
if(o){
this.iTitle.innerHTML=o;
}
},
//初始化缓冲区数据
Init:function(){
this.iTitle=document.getElementById('iTitle');
var txt=document.getElementById('InfoBufferText').innerHTML;
txt=txt.split('\r\n');
for(var i=0;i<txt.length;i++){
var it=txt[i].split('\t');
this.buffer.push("pic/"+it[0]);
this.infomation.push(it[1]);
}
}
};
function Init(){
document.oncontextmenu=function(){return false}
ImgBuffer.Init();
ImgView.Init();
ControlBar.Init();
}
</script>
</head>
<body onLoad="Init()">
<table class="MainTable"><tr><td class="MainTD">
<div class="MainDiv">
<div id="ImgDiv">
<img id="imgShow"/>
<img id="imgBuffer"/>
</div>
<div id="ConDiv">
<span id="iControl">
<a class="iPre" onFocus="this.blur()" href="#" onClick="ImgView.doNext(-1)"></a>
<a class="iPlay" onFocus="this.blur()" href="#" onClick="ImgView.doPlay()" id=bPlay></a>
<a class="iNext" onFocus="this.blur()" href="#" onClick="ImgView.doNext(1)"></a>
</span>
</div>
</div>
</td></tr>
<tr><td class="InfoTD">
<span id=iTitle></span>
</td></tr></table>
<embed src="bg.mp3" autostart="true" hidden="true" loop="true"></embed>
<textarea id=InfoBufferText style="display:none">
0.jpg 0.9990683676413704
1.jpg 0.4915394298210344
2.jpg 0.2447250546198405
3.jpg 0.9513171852852931
4.jpg 0.09078304669466941
5.jpg 0.1693801015037521
6.jpg 0.460344557640923
7.jpg 0.8544339688206558
8.jpg 0.08889033985185585
9.jpg 0.10715096393145329
10.jpg 0.8256081115923728
11.jpg 0.6929044725786009
12.jpg 0.876078798040927
13.jpg 0.2518078610744984
14.jpg 0.9284891237486883
15.jpg 0.8250407040247816
16.jpg 0.6550268991508781
17.jpg 0.4621466937197638
18.jpg 0.9712176294950598
19.jpg 0.46038304156706444
20.jpg 0.18137154703891511
21.jpg 0.30730098691846186
22.jpg 0.20385076538676366
</textarea>
</body>
</html>
同级目录放img/文件夹css所用图片， pic 放ppt图片 配置说明 写在textarea里面，改下ajax加载也可以
img/文件夹
