or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#book {
position:relative;width:220px;height:220px;
}
.pageRight {
width:220px;height:220px;background-Color:#FFFFCC;border:solid red 1px;
}
.pageLeft {
width:220px;height:220px;background-Color:#FFCC66;border:solid red 1px;
}
#paginate {
position:relative;left:150px;width:150px;height:30px;background-Color:#FFCC66;margin-Top:5px;margin-Bottom:5px;
}
#paginate .page {
position:relative;width:20px;height:20px;background-Color:#FFFFCC;margin:5px;float:left;cursor:pointer
}
#paginate .current {
background-Color:red;
}
/*]]>*/
</style>
</head>
<body>
<div id="book" >
</div>
<div id="paginate" >
</div>
<input type="button" name="" value="Next" onmouseup="zxcPhotoBookIV.Next('book',1);" />
<input id="b2" type="button" name="" value="Back" />
<input type="button" name="" value="GoTo 0" onmouseup="zxcPhotoBookIV.GoTo('book',0);" />
<input id="b4" type="button" name="" value="GoTo 1" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcPhotoBookIV.GoTo('book',2);" />
<input type="button" name="" value="GoTo 3" onmouseup="zxcPhotoBookIV.GoTo('book',3);" />
<input type="button" name="" value="GoTo 4" onmouseup="zxcPhotoBookIV.GoTo('book',4);" />
<input type="button" name="" value="Pause" onmouseup="zxcPhotoBookIV.Pause('book');" />
<input type="button" name="" value="Auto" onmouseup="zxcPhotoBookIV.Auto('book');" />
<script type="text/javascript">
/*<![CDATA[*/
// Photo Book IV (12-January-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/
var zxcPhotoBookIV={
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(id);
if (o.pgs[n]&&n!=o.n){
o.ud=n>o.n;
o.goto=n;
this.rotate(o);
}
}
},
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud>0;
this.rotate(o,o.n+ud);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
Auto:function(id,ms){
var oop=this,o=oop['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},
init:function(o){
var id=o.BookID,rpc=o.PageRight,a=o.PageArray,ms=o.Animate,h=o.AutoHold,b=document.getElementById(id),ary=[],z0=0;
if (b&&a instanceof Array&&typeof(rpc)=='string'){
for (;z0<a.length;z0++){
ary[z0]=new Image();
ary[z0].src=a[z0][0];
}
o.id=id;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
o.i=Math.PI/(2*o.ms);
o.b=b;
o.a=a;
o.rpc=rpc;
this.load(o,ary);
}
},
load:function(o,a){
for (var oop=this,z0=0;z0<a.length;z0++){
if (a[z0].width<40){
o.to=setTimeout(function(){ oop.load(o,a); },200);
return;
}
}
this.ready(o);
},
ready:function(o){
var lpc=o.PageLeft,add=o.AddEvents,s=o.AutoStart,p=document.getElementById(o.PaginateID),rp=document.createElement('DIV'),i=document.createElement('IMG'),w,h,lp,lpc =typeof(lpc)=='string'?lpc:o.rpc,pg,z0=0,z1=0;
o.ud=true;
o.n=0;
o.goto=-1;
rp.className=o.rpc;
o.b.appendChild(rp);
i.style.position=rp.style.position='absolute';
rp.style.overflow='hidden';
w=rp.offsetWidth;
h=rp.offsetHeight;
rp.style.left=w+'px';
rp.style.top='0px';
lp=rp.cloneNode(false);
lp.style.visibility='hidden';
o.rp=[];
o.lp=[];
o.pgs=[];
for (var z0=0;z0<o.a.length;z0+=2){
rp=z0>0?rp.cloneNode(false):rp;
rp.style.zIndex=6-z0;
i=i.cloneNode(false);
i.src=o.a[z0][0];
rp.appendChild(i);
o.b.appendChild(rp);
i.style.left=(w-i.width)/2+'px';
i.style.top=(h-i.height)/2+'px';
i.style.height=i.height+'px';
o.rp.push([[rp,'width',w,0],[i,'width',i.width,0],[i,'left',(w-i.width)/2,0]]);
lp=lp.cloneNode(false);
lp.className=lpc;
lp.style.width='0px';
lp.style.zIndex=z0;
i=i.cloneNode(false);
o.a[z0+1]?i.src=o.a[z0+1][0]:null;
i.style.display=o.a[z0+1]?'inline':'none';
lp.appendChild(i);
o.b.appendChild(lp);
i.style.left=(w-i.width)/2+'px';
i.style.height=i.height+'px';
i.style.top=(h-i.height)/2+'px';
o.lp.push([[lp,'width',w,0],[lp,'left',0,w],[i,'width',i.width,0],[i,'left',(w-i.width)/2,0]]);
this.pge(o,p);
}
this.pge(o,p);
o.lgth=o.lp.length-1;
if (add instanceof Array){
for (;z1<add.length;z1++){
if (add[z1]){
pg=document.getElementById(add[z1][0]);
if (pg&&this[add[z1][2]]){
w=add[z1][1];
this.addevt(pg,w=='click'||w=='mouseover'||w=='mouseout'||w=='mousedown'?w:'mouseup',add[z1][2],o.id,add[z1][3]);
}
}
}
}
o.r=true;
this['zxc'+o.id]=o;
typeof(s)=='number'&&s>0?this.Auto(o.id,s):null;
},
pge:function(o,p){
pg=document.createElement('DIV');
pg.className='page'+(o.pgs.length!=0?'':' current');
p?p.appendChild(pg):null;
this.addevt(pg,'mouseup','GoTo',o.id,o.pgs.length);
o.pgs.push(pg);
},
rotate:function(o,a){
this.Pause(o.id);
o.auto=a===true;
o.auto||o.lp[n]?o.goto=-1:null;
var n,gt=o.pgs[o.goto],ms=o.ms/(gt?2:1),z0=0;
n=gt||o.auto?o.n+(o.ud?1:-1):a;
// n=Math.min(Math.max(n,o.ud?1:0),o.lgth+(o.ud?1:0));
a=o.ud?o.rp[n-1]:o.lp[n];
if (o.ReverseAuto!==false&&o.auto&&!a){
o.ud=!o.ud;
this.Auto(o.id,o.h*2);
}
if (o.r&&a&&n!=o.n){
o.r=false;
o.pgs[o.n].className='page';
o.n=n;
a[0][0].style.visibility='visible';
for (var z0=0;z0<a.length;z0++){
this.animate(o,a[z0],a[z0][2],a[z0][3],new Date(),o.ms,'s',z0==0);
}
}
},
animate:function(o,a,f,t,srt,mS,s,h){
clearTimeout(a[6]);
var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(o.i*ms)+f:s=='c'?t-(t-f)*Math.cos(o.i*ms):(t-f)/mS*ms+f,z0=0;
if (isFinite(n)){
a[4]=Math.max(f<0||t<0?n:0,n);
a[0].style[a[1]]=a[4]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,h); },10);
}
else {
a[6]=t;
a[0].style[a[1]]=t+'px';
if (h===true){
o.pgs[o.n].className='page current';
t==0?a[0].style.visibility='hidden':null;
a=o.ud?o.lp[o.n-1]:o.rp[o.n];
a[0][0].style.visibility='visible';
for (;z0<a.length;z0++){
this.animate(o,a[z0],a[z0][3],a[z0][2],new Date(),o.ms,'c',z0==0?'A':'');
}
}
if (h=='A'){
o.r=true;
o.auto?oop.Auto(o.id,o.h):null;
o.pgs[o.goto]&&o.n!=o.goto?oop.rotate(o):null;
}
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcPhotoBookIV.init({
BookID:'book', // the unique ID name of the parent DIV. (string)
PageRight:'pageRight', // the class name of the right hand page. (string)
PageArray:[ // an array defining the image SRCs (string)
// field 0 = the image SRC.
['http://www.vicsjavascripts.org/StdImages/0.gif'],
['http://www.vicsjavascripts.org/StdImages/1.gif'],
['http://www.vicsjavascripts.org/StdImages/2.gif'],
['http://www.vicsjavascripts.org/StdImages/3.gif'],
['http://www.vicsjavascripts.org/StdImages/4.gif'],
['http://www.vicsjavascripts.org/StdImages/5.gif'],
['http://www.vicsjavascripts.org/StdImages/6.gif']
],
PageLeft:'pageLeft', //(optional) the class name of the left hand page. (string, default = PageRight)
Animate:1000, //(optional) the page turn duration in millisec. (number, default = 1000)
AutoHold:2000, //(optional) the auto rotate 'hold' delay in millisec. (number, default = Animate*4)
AutoStart:1000, //(optional) the auto rotate 'start' delay in millisec. (number, default = no auto start)
ReverseAuto:true, //(optional) false = the auto rotate will not reverse. (number, default = the auto rotate will reverse)
PaginateID:'paginate', //(optional) the unique ID name of the paginate parent DIV. (string, default = no pagination)
AddEvents:[ //(optional) an array defining the control events to add. (array, default = in line event calls)
// field 0 = the unique ID name of the element.
// field 1 = the event type.
// field 2 = the function name.
// field 3 = the control parameter to pass to the function.
['b2','mouseup','Next',-1],
['b4','mouseup','GoTo',1],
['book','mouseover','Pause'],
['book','mouseout','Auto']
]
});
/*]]>*/
</script>
</body>
</html>